如何使用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}); 

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

任何人都可以帮助我。

Answer 1

自动完成需要回调充当具有下面的参数

一个request对象source，具有单term属性是指文本输入中当前的值。

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

退房此链接 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 2

你应该尝试使用AJAX的方式，并在服务器端的搜索

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

Answer 3

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

功能：第三变型中，回调，提供最大的灵活性和可用于任何数据源连接到自动填充，包括JSONP。回调得到两个参数：

A request对象，具有单个term属性，它指向文本输入中当前的值。例如，如果用户在城市字段中输入"new yo"，则自动完成项将等于"new yo"。

A 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/