Question

我需要在jquery autocomplete中使用名称或数字进行搜索

我试过这个：

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});

从上面的数组我需要搜索name和phone_number，但现在只有电话号码搜索工作，名称搜索不起作用。

任何人都会帮助我。

Answer 1

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

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

Answer 2

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

source对象，具有单个术语属性，引用文本输入中当前的值。

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

查看此链接 http://api.jqueryui.com/autocomplete/#option-source

您可以尝试使用以下代码

response

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
});

Answer 3

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

功能第三种变体，一种回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成，包括JSONP。回调有两个参数：

request对象，具有单个term属性，该属性引用文本输入中当前的值。例如，如果用户在城市字段中输入"new yo"，则自动填充字词将等于"new yo"。

一个response回调，它需要一个参数：向用户建议的数据。应根据提供的术语过滤此数据，并且可以采用上述任何简单本地数据格式。在提供自定义源回调以处理请求期间的错误时，这一点非常重要。即使遇到错误，也必须始终调用response回调。这可确保窗口小部件始终具有正确的状态。

此外，您的源数组需要包含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自动完成中使用名称和数字进行搜索？

3 个答案: