Question

这是我的代码。

$(function() {

  $("#tags input").on({
    focusout: function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
      if (txt) $("<span/>", {
        text: txt.toLowerCase(),
        insertBefore: this
      });
      this.value = "";
    },
    keydown: function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if (/(188|13|32)/.test(ev.which)) {
        $(this).focusout();
      } else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasClass('toRemove')) { //<< check for class
        $(this).prev("span").remove();
      } else if (ev.which === 8 && this.value == '') {
        $(this).prev("span").addClass('toRemove'); //<< add class
      } else {
        $(this).prevAll('.toRemove').removeClass('toRemove'); //<< remove class on keydown
      }
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove();
  });

});

#tags {
  float: right;
  border: 1px solid #ccc;
  padding: 5px;
  font-family: Arial;
}
#tags > span {
  cursor: pointer;
  display: block;
  float: right;
  color: #3e6d8e;
  background: #E1ECF4;
  padding: 5px;
  padding-right: 25px;
  margin: 4px;
}
#tags > span:hover {
  opacity: 0.7;
}
#tags > span:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  padding: 2px 5px;
  margin-left: 3px;
  font-size: 11px;
}
#tags > input {
  direction: rtl;
  background: #eee;
  border: 0;
  margin: 4px;
  padding: 7px;
  width: auto;
}
#tags > span.toRemove {
  background-color: red;
}
.autocomplete{
    border:1px solid #aaa;
    border-top: none;
    width: 179px;
    height: 150px;
    margin-left:5px;
    margin-top: -4px;
}
.autocomplete ul{
    margin-top: 0;
    padding-top: 5px;
    padding-left: 0px;
    list-style-type: none;
}
.autocomplete li{
    border-bottom: 1px solid #eee;
    padding:4px 8px;
    font-size:12px;
}
.autocomplete li:hover{
   background-color:#eee;
   cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tags">
  <span>php</span>
  <span>html</span>
  <input type="text" value="" placeholder="Add a tag" />
  <div class="autocomplete">
      <ul>
          <li>MySQL</li>
          <li>CSS</li>
          <li>SQL</li>
          <li>Lisp</li>
          <li>jQuery</li>
      </ul>
  </div>
</div>

如您所见，我正在尝试为输入进行自动填充。目前这些行是不变的，所以我要做的就是让自动完成框动态化。我有这个数组：

var tags = ["HTML", "MySQL", "CSS", "SQL", "Lisp", "jQuery", "PHP", "C", "C#", "JAVA", "android"];

现在我需要搜索tags数组并返回具有用户输入子字符串的项目。像这样：

$("#tags input").on('keydown', function(){
    for (i = 0; i < cars.length; i++) { 
        if (tags[i].toLowerCase().indexOf("user's input".toLowerCase()) >= 0) {
            return tags[i];
        }
    }
});

我的问题是什么？我的代码会返回所有匹配的代码。好吧，我需要删除那些已经选择为用户标签的标签（进入自动完成建议）。

例如，假设用户已选择SQL标记。现在他写了SQ，在这种情况下，我只需要将MySQL标记显示为自动完成，而不是MySQL和SQL （再次）

我该怎么做？

注意：我不想使用 jQuery UI 。

Answer 1

您可以重新构建标记对象以考虑选择。像..

var tags = [{ tagName : "HTML", selected : false},
            { tagName : "MySQL", selected : false},
            { tagName : "CSS", selected : false}}
           ]

现在你的搜索功能应该是这样的......

$("#tags input").on('keydown', function(){
for (i = 0; i < tags.length; i++) { 
    if (tags[i].name.toLowerCase().indexOf("user's input".toLowerCase()) >= 0 && !tags[i].selected) {
        tags[i].selected = true;
        return tags[i];
    }
}

}）;

希望这有帮助。

如何删除已使用过的项目？

1 个答案: