多词自动完成过滤答案

【问题标题】：Multiple words autocomplete filtering多词自动完成过滤
【发布时间】：2020-11-16 16:16:25
【问题描述】：

这是我的自动完成代码。这对第一个词很有效。但我还需要在同一个搜索框中过滤其他单词。这是我的代码。

它的工作但我还需要过滤第二个单词。像 Hello world Google。当用户输入 hello 时，它的过滤器 hello world。之后他输入谷歌然后我想过滤谷歌单词

<div class="ui-widget">
<label for="tags">Search: </label>
<input type="text" id="tags" onkeypress="edValueKeyPress()"/>
</div>

$(function edValueKeyPress() { 
var availableTags = [
"Hello",
"Hello World ",
"Google",
"Google Gmail",
"Micheal",
"Peter"
];
$( "#tags" ).autocomplete({
source: availableTags
}); 
})

jsfiddle playground

【问题讨论】：

它正在处理您添加链接的小提琴。
它的工作但我还需要过滤第二个单词。就像你好世界谷歌。当用户输入 hello 时，它的过滤器 hello world。之后他输入谷歌然后我想过滤谷歌词。

标签： jquery

【解决方案1】：

您可以使用reference from here for more details。您需要更新您的autocomplete 的source 和select 回调。也不需要使用$(function edValueKeyPress() { 块和onkeypress="edValueKeyPress()"。

在下面试试。

function split(val) {
  return val.split(/,\s*/);
}

function extractLast(term) {
  return split(term).pop();
}

var availableTags = [
  "Hello",
  "Hello World",
  "Google",
  "Google Gmail",
  "Micheal",
  "Peter"
];
$("#tags").autocomplete({
  source: function(request, response) {
    // delegate back to autocomplete, but extract the last term
    response($.ui.autocomplete.filter(
      availableTags, extractLast(request.term)));
  },
  select: function(event, ui) {
    var terms = split(this.value);
    // remove the current input
    terms.pop();
    // add the selected item
    terms.push(ui.item.value);
    // add placeholder to get the comma-and-space at the end
    terms.push("");
    this.value = terms.join(", ");
    return false;
  }
});

 <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js" jq=""></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div class="ui-widget">
  <label for="tags">Search: </label>
  <input type="text" id="tags" />
</div>

【讨论】：