jQuery autocomplete filtering issue

纵然是瞬间 提交于 2021-02-11 12:52:26

问题


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.

Here is the jsfiddle sample

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>

回答1:


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.

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;
}

Try it below.

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>


来源:https://stackoverflow.com/questions/63555427/jquery-autocomplete-filtering-issue

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!