How can I search in the js array?

Question

I'm trying to suggest the name of people when user inputs @ in the textarea. Here is what I have done so far:

var Names = $('td').map(function() { return $(this).text(); }).get();

function SuggestPeople() {
  var $textarea = $('.TxtArea');
  var textarea = $textarea[0];
  var sel = $textarea.getSelection();
  var val = textarea.value;
  var pos = sel.start;
  
    if(val.substr(pos-1,1) == '@'){
      for (var i = 0; i < Names.length; i++) {
	    Names[i] = "<span>" + Names[i] + "</span>";
      }
      $('.SuggestPeople').html(Names);
    } else {
       $('.SuggestPeople').html('');
    }
  
}

$('.TxtArea').on('keydown click', function(e) {
   // e.preventDefault();
    SuggestPeople();
});

table{
  display:none;
}

div{
  background-color:#eee;
  min-height: 20px;
  width: 200px;
  padding-top:5px;
  margin-bottom: 3px;
}

div > span{
  border: 1px solid gray;
  margin: 0 3px;
}

textarea{
  width: 195px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rangyinputs.googlecode.com/svn/trunk/rangyinputs_jquery.min.js"></script>

<table>
  <tr>
    <td>Jack</td>
    <td>Peter</td>
    <td>Barmar</td>
  </tr>
</table>

<div class="SuggestPeople"></div>
<textarea class="TxtArea"></textarea>

In the code above, it suggests all names (which are exist in the array) to user. But actually I need to improve it and just suggest those names which are near to what user writes after @. How can I do that? I want exactly something like stackoverflow.

@guest271314 What you linked is really close to what I need. .getSelection() let us to know the position of text-writing-symbol (I mean what is blink in inputs) — stack
– stack, Commented Feb 20, 2016 at 17:03

baao · Accepted Answer · 2016-02-20 18:19:42Z

Here's a solution that should work for you:

// polyfills for older browsers

if (!String.prototype.startsWith) {
String.prototype.startsWith = function(searchString, position){
  position = position || 0;
  return this.substr(position, searchString.length) === searchString;
 };
}

// code

var Names = $('td').map(function () {
    return $(this).text();
}).get();
function SuggestPeople(e) {
    var val = e.target.value,
        suggest = document.getElementById('SuggestPeople');
    if (val.substr(- 2).startsWith('@')) {
        suggest.innerHTML = '<span>' + Names.map(function (v) {
                var end = val.substr(- 1).toLowerCase();
                if (v.startsWith(end) || v.startsWith(end.toUpperCase())) {
                    return v;
                }
            }).filter(function (v) {
                return v
            }).join('</span><span>') + '</span>'
    } else {
      suggest.innerHTML = '';
    }

}

$('.TxtArea').on('keyup', function (e) {
    // e.preventDefault();
    SuggestPeople(e);
});

table{
  display:none;
}

div{
  background-color:#eee;
  min-height: 20px;
  width: 200px;
  padding-top:5px;
  margin-bottom: 3px;
}

div > span{
  border: 1px solid gray;
  margin: 0 3px;
}

textarea{
  width: 195px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rangyinputs.googlecode.com/svn/trunk/rangyinputs_jquery.min.js"></script>

<table>
  <tr>
    <td>Jack</td>
    <td>Peter</td>
    <td>Barmar</td>
  </tr>
</table>

<div id="SuggestPeople"></div>
<textarea class="TxtArea"></textarea>

Please note that String.prototype.startsWith() doesn't work in IE and older browsers, but you can find a polyfill here: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

Are you sure it works? It doesn't work for me .. Nothing happens when I write @. I use Chrome (Version 40.0.2214.111 (64-bit))
Yes, but when you type a letter after the @ @stack, like on SO -- oh, if you're using an old browser like chrome 40, you need the polyfill I mentionend
Yes, you need the polyfill - or better update your browser and include the polyfill @stack
Ok well, I updated my browser and it works as well. But it has a small problem, it just shows a suggest for first letter after @. For example it doesn't show suggest for this @Jac .. I think it will be much better if you improve this condition if (val.substr(- 2).startsWith('@')) {
Yes, might be - I didn't want to take all the development from you - but now you have a good starting point @stack

Collectives™ on Stack Overflow

How can I search in the js array?

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related