Question

我试图在用户在textarea中输入@时建议用户名。以下是我到目前为止所做的事情：

＆＃13;

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();
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

在上面的代码中，它建议所有名称（它们都存在于数组中）给用户。但实际上我需要对其进行改进，并建议那些与用户在@后写的内容相近的名称。我怎样才能做到这一点？我想要像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

如何在js数组中搜索？

1 个答案: