如何使用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/