javascript - EasyAutocomplete 的自定义匹配公式

Question

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

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

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

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

《市场街》
“市场街巷”
《街南路》

如果我的搜索是“Street”，则根据插件的默认功能，所有 3 个结果都会显示，因为“street”一词是这 3 个结果中每一个结果的一部分。 (下面的演示)

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

我的问题是搜索结果项中任何单词的开头的匹配公式。因此，如果我的搜索是“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 检查的用途。