如何在 jquery 自动完成中搜索单个单词？答案

【问题标题】：How to search single word in the jquery autocomplete?如何在 jquery 自动完成中搜索单个单词？
【发布时间】：2015-05-07 03:53:54
【问题描述】：

如何在 jquery 自动完成中搜索单词？考虑我有一个如下的数组。如果我输入的是“S”，那么我必须打印所有与“S”相关的结果，如 ActionScript、AppleScript、Scala、BASIC、Haskell、Scheme、ColdFusion 等。你可以更新这个fiddle

var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];

提前致谢。

【问题讨论】：

jsfiddle.net/arunpjohny/v03pjhqk/1 - 很好看，您真正在寻找什么...下拉菜单包含所有带有 s 的项目
我认为您的小提琴可以按照您的要求工作！这里有什么问题？？
尝试在 jsfiddle jsfiddle.net/Lkk4pd9o/1 处将 js 与 html 分开
可能是jsfiddle.net/arunpjohny/v03pjhqk/2 - 允许选择多个项目
:) 不，我正在寻找的是当我输入“S”或“a”时，它必须打印相关搜索可能在 console.log 中。

标签： jquery

【解决方案1】：

试试这个。您根本不需要自动完成。

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

$("#tags").keyup(function(){
    $("#found").find('p').remove();
    var val = $(this).val();
    if(val.length>0){
    for(var i=0;i<availableTags.length;i++)
    {
        var item =   availableTags[i];
        if(item.toLowerCase().indexOf(val.toLowerCase())>-1)
        {
            $("#found").append("<p>"+item+"<br></p>");
        }
    }
    }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
      <div id="found"></div>
</div>

【讨论】：

【解决方案2】：

如果您不想要下拉菜单，也许您甚至不需要 jquery UI。你可以做类似this:

$input.on('keyup', function(){
    availableTags.filter(function(_item){
        return _item.toLowerCase().indexOf($inp.val()) > -1;
    }).forEach(function(_item) {
        console.log( _item );
    });
});

【讨论】：