Question

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

我正在尝试编写一个自定义匹配公式，该公式可以使我执行此操作，但是希望对此有所帮助。

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

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

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

如果我的搜索是“ Street”，则通过插件的默认功能，将显示所有3个结果，因为单词“ street”是这3个结果中的每一个的 part 。（下面的演示）

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

我的问题是寻找一个匹配公式，该公式搜索结果项中任何单词的开头。因此，如果我的搜索是“街道”，则将显示第一个和第三个结果。

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

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的自定义匹配公式

1 个答案: