EasyAutocomplete 的自定义匹配公式

Question

我正在使用一个名为 EasyAutocomplete 的 JS 插件来处理我网站上的高级自动提示。它支持远程数据集（JSON、XML、纯文本）并使用ajax方法调用来搜索、排序和匹配响应短语。

我正在尝试编写一个自定义匹配公式，它允许我这样做，但希望能得到一些帮助。

现在，当您键入内容时，它会搜索 word/phrase 的任何部分以查找您正在键入的内容。 我想让它只检查单个或多个单词短语中每个单词的开头。

假设我的远程数据集包含：

"Market Street"
"Market Thestreet Lane"
"Street South Road"

如果我的搜索是 "Street"，通过插件的默认功能，所有 3 个结果都会显示，因为单词 "street" 是每个的 part那3个结果。（下面的演示）

我在插件的 Github 存储库 (and the answer from the plugin author) 上发现了一个与我类似的问题，但该问题仅用于匹配每个结果项的开头（而不是每个结果项中的每个单词） ).因此，如果我的搜索是 "Street"，则只会显示第三个结果。（下面的演示）

我的问题是关于在结果项中搜索 任何单词 开头的匹配公式。所以，如果我的搜索是 "Street"，第一个和第三个结果将显示。

默认情况下插件的功能如下（我已经注释掉了自定义匹配公式）：

jQuery(document).ready(function($) {
  
  var options = {
    data: [
  {"name": "Market Street", "parent": "Dog Management", "link": "https://marketstreet.com"},
  {"name": "Market Thestreet Lane", "parent": "Dog Management", "link": "https://marketlane.com"},
  {"name": "Street South Road", "parent": "Cat Management", "link": "https://streetsouthroad.com"}
],
    getValue: "name",
    list: { 
      match: {
        enabled: true,
/*
          method:  function(element, phrase) {
           if(element.indexOf(phrase) === 0) {
             return true;
           } else {
             return false;
           }
         }
*/
       },
      onSelectItemEvent: function() {
        var selectedItemValue = $("#companies").getSelectedItemData().parent;
        var selectedItemLink = $("#companies").getSelectedItemData().link;
        $("#company_result").html('<a href="'+selectedItemLink+'">Contact '+selectedItemValue+'</a>').trigger("change");
      },
    },    
    template: {
    type: "description",
    fields: {
     description: "parent"
    }
   }    
  };
  $("#companies").easyAutocomplete(options);

});

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'>
<link rel='stylesheet' href='https://d3vv6lp55qjaqc.cloudfront.net/items/040r1I2Y1K3T3w3L3i3E/easy-autocomplete.css'>


<script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://d3vv6lp55qjaqc.cloudfront.net/items/2Q0s1P3D0D2i3u0M1m1x/jquery.easy-autocomplete.min.js'></script>

<div class="container">
   <br>
    <div class="row">
        <div class="col-md-8 col-offset-3">
          <p>Search for "Street"</p>
              <form style="text-align: center; margin: 0 auto;" onkeypress="return event.keyCode != 13;">
      <input class="form-control" id="companies" placeholder="Type your resort property name..."/>
      <div id="company_result"></div>
    </form>
        </div>
    </div>
</div>

这是仅在结果项以搜索词组开头时才匹配的自定义匹配公式：

jQuery(document).ready(function($) {
  
  var options = {
    data: [
  {"name": "Market Street", "parent": "Dog Management", "link": "https://marketstreet.com"},
  {"name": "Market Thestreet Lane", "parent": "Dog Management", "link": "https://marketlane.com"},
  {"name": "Street South Road", "parent": "Cat Management", "link": "https://streetsouthroad.com"}
],
    getValue: "name",
    list: { 
      match: {
        enabled: true,
          method:  function(element, phrase) {
           if(element.indexOf(phrase) === 0) {
             return true;
           } else {
             return false;
           }
         }
       },
      onSelectItemEvent: function() {
        var selectedItemValue = $("#companies").getSelectedItemData().parent;
        var selectedItemLink = $("#companies").getSelectedItemData().link;
        $("#company_result").html('<a href="'+selectedItemLink+'">Contact '+selectedItemValue+'</a>').trigger("change");
      },
    },    
    template: {
    type: "description",
    fields: {
     description: "parent"
    }
   }    
  };
  $("#companies").easyAutocomplete(options);

});

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'>
<link rel='stylesheet' href='https://d3vv6lp55qjaqc.cloudfront.net/items/040r1I2Y1K3T3w3L3i3E/easy-autocomplete.css'>


<script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://d3vv6lp55qjaqc.cloudfront.net/items/2Q0s1P3D0D2i3u0M1m1x/jquery.easy-autocomplete.min.js'></script>

<div class="container">
   <br>
    <div class="row">
        <div class="col-md-8 col-offset-3">
          <p>Search for "Street"</p>
              <form style="text-align: center; margin: 0 auto;" onkeypress="return event.keyCode != 13;">
      <input class="form-control" id="companies" placeholder="Type your resort property name..."/>
      <div id="company_result"></div>
    </form>
        </div>
    </div>
</div>

谢谢！

Answer 1

method: function(element, phrase) {
  return !!element.toLowerCase().split(" ").filter((word) => word.indexOf(phrase.toLowerCase()) === 0).length;
}

这个函数：

使元素小写（没有大写问题）
将其拆分成单词
过滤掉所有不以给定输入开头的单词

如果过滤后的数组中有任何元素，它必须匹配。否则，它不会。这就是 .length 检查的目的。

EasyAutocomplete 的自定义匹配公式

Custom Match Formula for EasyAutocomplete

javascript

jquery

autocomplete

easyautocomplete