如何在 jquery 自动完成中使用姓名和号码进行搜索？

Question

我需要在 jquery 自动完成中使用姓名或号码进行搜索

我试过这个：

HTML:

<input type="text" class="form-control" id="plugins" name="plugins" />

脚本：

var arraY = [{name: "xxx", phone_number: "9997515744},{name: "abc", phone_number: "9619054073"},{name: "asd", phone_number: "9323135708"}]
$("#plugins").autocomplete({source: plugin_names});

从上面的数组我需要同时使用名称和 phone_number 进行搜索，但现在只有 phone 数字搜索有效，名称搜索无效。

谁能帮帮我。

Answer 1

您或许应该尝试使用 ajax 选项并在服务器端进行搜索

$('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

Answer 2

autocomplete 将回调函数作为 source 具有以下参数

一个 request 对象，带有一个术语属性，它指的是当前在文本输入中的值。

一个 response 回调，它需要一个参数：向用户建议的数据。此数据应根据提供的术语进行过滤，并且可以采用上述任何一种简单本地数据格式。

看看这个 link http://api.jqueryui.com/autocomplete/#option-source

你能试试下面的代码吗

var arraY = [{name: "xxx", phone_number: "9997515744"},{name: "abc", phone_number: "9619054073"},{name: "asd", phone_number: "9323135708"}];

// the typed data is in request.term

function multipleFieldMatch(request, response) {
    function isMatch(s) {
        return s.toLowerCase().indexOf(request.term.toLowerCase())!==-1;
    }
    var i, len, obj, totalMatches = [];
    len = arraY.length;

    if (request.term==="") {
        response([]);
        return;
    }

    for  (i = 0; i<len; i++) {
        obj = arraY[i];
        if (isMatch(obj.name) || isMatch(obj.phone_number))    {
            totalMatches.push(obj);
        }
    }
    response(totalMatches);
}

$( "#plugins").autocomplete({
    source: multipleFieldMatch
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="plugins" name="plugins" />

Answer 3

根据 API 文档，我建议使用 source 作为回调函数。

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:

A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".

A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

另外，你的源数组需要包含一个label和value，它可以有更多的数据，但这两个是必须的。查看有关自定义数据的更多信息：http://jqueryui.com/autocomplete/#custom-data

我会建议如下：

JavaScript

var myData = [{
  label: "xxx",
  value: "9997515744"
}, {
  label: "abc",
  value: "9619054073"
}, {
  label: "asd",
  value: "9323135708"
}];
$(function() {
  $("#plugins").autocomplete({
    source: function(req, resp) {
      var results = [];
      $.each(myData, function(k, v) {
        // Make a pass for names
        if (v.label.indexOf(req.term) != -1) {
          results.push(v);
          return;
        }
        // Make a pass for phone
        if (v.value.indexOf(req.term) != -1) {
          results.push(v);
          return;
        }
      });
      resp(results);
    }
  });
});

工作示例：https://jsfiddle.net/Twisty/urtkxo46/

如何在 jquery 自动完成中使用姓名和号码进行搜索？

How to search with name and number in jquery autocomplete?

javascript

jquery

jquery-ui

jquery-ui-autocomplete