jQuery 自动完成过滤问题

Question

这是我的代码。我仅在用户输入“[”符号时才尝试搜索。但是用户也可以输入正常的单词，比如你好。

示例：您好 - 无需自动完成。 [您好] - 需要自动完成。

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

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

var availableTags = [
  "[Hello]",
  "[Hello World]",
  "[Google",
  "[New Life]",
  "[World]",
  "[Old]"
];
$("#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" onkeypress="edValueKeyPress()" />
</div>

Answer 1

您可以更新 source callback 以使用 response，如下所示。获取 lastTerm 并检查它是否以 [ 开头，然后只有 return 过滤结果，否则 return 为空，不会在自动完成中显示任何结果。

根据评论，它不适用于自动完成的第二次选择，您需要添加 focus callback ，这与 select 类似，但几乎没有变化一行 terms.push("");.

source: function(request, response) {
  let lastTerm = extractLast(request.term);
  if (lastTerm.trim().startsWith('[')) {
    // delegate back to autocomplete, but extract the last term
    response($.ui.autocomplete.filter(availableTags, lastTerm));
  } else {
    response([]);
  }
},
focus: function(event, ui) {
  var terms = split(this.value);
  // remove the current input
  terms.pop();
  // add the selected item
  terms.push(ui.item.value); 
  // terms.push(""); <-- comment this line from select   
  this.value = terms.join(", ");
  return false;
}

在下面试试。

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

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

var availableTags = [
  "[Hello]",
  "[Hello World]",
  "[Google",
  "[New Life]",
  "[World]",
  "[Old]"
];

$("#tags").autocomplete({
  source: function(request, response) {
    let lastTerm = extractLast(request.term);
    if (lastTerm.trim().startsWith('[')) {
      // delegate back to autocomplete, but extract the last term
      response($.ui.autocomplete.filter(availableTags, lastTerm));
    } else {
      response([]);
    }
  },
  focus: function(event, ui) {
     var terms = split(this.value);
    // remove the current input
    terms.pop();
    // add the selected item
    terms.push(ui.item.value);
    // terms.push(""); <-- comment this line from select
    this.value = terms.join(", ");
    return false;
  },
  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;
  }
});

function edValueKeyPress() {}

<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" onkeypress="edValueKeyPress()" />
</div>

jQuery 自动完成过滤问题

jQuery autocomplete filtering issue

jquery

jquery-ui-autocomplete