jQuery自动完成过滤问题 [英] jQuery autocomplete filtering issue

问题描述

这是我的代码.我仅在用户输入"["时才尝试搜索象征.但是用户也可以输入普通的单词，例如hello.

This is my code. I am trying to search only if user enter "[" symbol. But user can enter normal words also like hello.

示例: 您好-无需自动完成. [你好]-需要自动完成.

Example : Hello - no need to autocomplete. [Hello] - need to autocomplete.

这是 jsfiddle示例

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>

推荐答案

您可以更新您的source callback以使用response，如下所示.获取lastTerm并检查它是否以[开头，然后仅返回过滤的结果，否则返回空值，该值将不会在自动完成中显示任何结果.

You can update your source callback to use response like below. Get lastTerm and check if it starts with [ then only return filtered results else return empty which will not display any results in autocomplete.

根据注释，它不能用于自动完成的第二次选择，您需要添加focus callback，这与select相似，几乎没有变化，因为它将没有一行terms.push("");.

As per comment it was not working for 2nd selection from autocomplete, you need to add focus callback which would be similar to select with little change that it will not have one line 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自动完成过滤问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！