如何在 js 数组中搜索

How can I search in the js array?

本文关键字：搜索 数组 js      更新时间：2023-09-26

当用户输入文本区域中@时，我试图建议人名。这是我到目前为止所做的：

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>

在上面的代码中，它向用户建议所有名称（存在于数组中）。但实际上我需要改进它，只是建议那些接近用户在@后写的名称。我该怎么做？我想要的正是像堆栈溢出这样的东西。

这是一个应该适合您的解决方案：

// 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 和旧版浏览器中不起作用，但您可以在此处找到 polyfill：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

相关文章：