Jquery 自动完成 - 在值中搜索并显示标签

Question

我在 label/value 手机列表中使用 jquery 自动完成功能：

[ { label: "Samsung Galaxy S7", value: "Samsung Galaxy S7"}, 
  { label: "Samsung Galaxy S6", value: "Samsung Galaxy S6"},
.....
]

我想在不指定系列名称的情况下进行研究，即如果用户键入 "Samsung S7" 自动完成建议 "Samsung Galaxy S7"

我尝试修改源代码如下：

[ { label: "Samsung Galaxy S7 Samsung S7", value: "Samsung Galaxy S7"}, 
  { label: "Samsung Galaxy S6 Samsung S6", value: "Samsung Galaxy S6"},
.....
]

此代码有效，但它很丑陋，因为自动完成菜单显示 "Samsung Galaxy S6 Samsung S6" 而不是简单的 "Samsung Galaxy S6"

有没有一种方法可以在属性上进行研究，同时在菜单中显示另一个？

Answer 1

您需要使用 source option. For a simple use case something like the following will do. See jQuery UI Autocomplete widget search configuration 编写自定义搜索逻辑以获取更多信息。

也许您需要一个复杂的正则表达式来处理边缘情况（如果您有 static/trust 有价值的数据源则不需要）。

$(document).ready(function() {

  var devices = [{
    label: "Samsung Galaxy S7",
    value: "Samsung Galaxy S7"
  }, {
    label: "Samsung Galaxy S6",
    value: "Samsung Galaxy S6"
  }];

  $("#devices").autocomplete({
    source: function(req, responseFn) {
      var words = req.term.split(' ');
      var results = $.grep(devices, function(device, index) {
        var sentence = device.label.toLowerCase();
        return words.every(function(word) {
          return sentence.indexOf(word.toLowerCase()) >= 0;
        });
      });
      responseFn(results);
    }
  });

});

input {
  margin-top: 100px;
}

<link href="https://code.jquery.com/ui/1.8.23/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<input type="text" id="devices" />

Jquery 自动完成 - 在值中搜索并显示标签

Jquery autocomplete - search in value and display label

jquery

autocomplete

jquery-ui-autocomplete