Jquery 自动完成匹配字符串中的多个无序单词

Jquery Autocomplete matching multiple unordered words in a string

本文关键字：单词 无序 字符串 Jquery      更新时间：2023-09-26

我正在尝试显示输入的搜索词的最佳匹配。例如

现在Jquery没有给我想要的效果。当我输入：今天一个时，自动完成将不显示任何内容，但如果我有一天输入，它将显示以这两个单词开头的搜索结果。我希望今天出现一天是今天的第一个也是最后一个。我希望搜索结果显示其中包含这些单词的顺序并不重要。我在这里看了一下，找不到这样的东西，这似乎是一种常见的搜索方法，我不明白为什么没有人问这个问题。是否有内置方法可以处理此问题？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    var availableTags = [
          "one day is the first and last today" , "tuesday is today" , "one" , "one day is tomorrow"

    ];
    $( "#tags" ).autocomplete({
      source: availableTags, multiple: true,
        mustMatch: false
    });
  });
  </script>
</head>
<body>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>

</body>
</html>

尝试覆盖自动完成提供的默认筛选逻辑。

// Overrides the default autocomplete filter function to search for matched on atleast 1 word in each of the input term's words
$.ui.autocomplete.filter = function (array, terms) {
    arrayOfTerms = terms.split(" ");
    var term = $.map(arrayOfTerms, function (tm) {
         return $.ui.autocomplete.escapeRegex(tm);
    }).join('|');
   var matcher = new RegExp("''b" + term, "i");
    return $.grep(array, function (value) {
       return matcher.test(value.label || value.value || value);
    });
};

小提琴

或者创建自己的过滤器函数并处理搜索的返回，以便保持完整的过滤器函数不变。

function customFilter(array, terms) {
    arrayOfTerms = terms.split(" ");
    var term = $.map(arrayOfTerms, function (tm) {
         return $.ui.autocomplete.escapeRegex(tm);
    }).join('|');
   var matcher = new RegExp("''b" + term, "i");
    return $.grep(array, function (value) {
       return matcher.test(value.label || value.value || value);
    });
};
$("#tags").autocomplete({
    source: availableTags,
    multiple: true,
    mustMatch: false
    ,source: function (request, response) {
        response(customFilter(
        availableTags, request.term));
    },
});

小提琴

相关文章：