如何在js数组中搜索？

Question

我试图建议用户在textarea输入@的人的名字。以下是我迄今所做的：

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++) { 
 
\t  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>

---

在上面的代码，它表明所有名称（这是存在数组中）用户。但实际上，我需要改进它，只是建议那些用户在@之后写入的名称。我怎样才能做到这一点？我想要的东西就像stackoverflow。

Answer 1

下面是应为你工作的解决方案：

// 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>

请注意，String.prototype.startsWith()并不在IE和旧的浏览器，但你可以在这里找到一个填充工具：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith