jqueryオートコンプリートで名前と番号で検索するには？

Question

私はこれを試してみましたjqueryのオートコンプリート

に名前または番号で検索する必要があります：私は検索する必要が上記の配列から

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

：スクリプト

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

：

HTMLをnameとphone_numberの両方を使用していましたが、現在は電話番号の検索のみが機能していますが、名前の検索は機能しません。

誰でも手伝ってください。

Answer 1

オートコンプリートは、単一で以下の引数

requestオブジェクトを、持っているsourceとしてコールバック関数をとります現在のテキスト入力の値を参照するtermプロパティです。

responseコールバック.1つの引数を必要とする：ユーザーに示唆するデータ。このデータは、提供された用語に基づいてフィルタリングされるべきであり、単純なローカルデータについて上述したいずれかのフォーマットにすることができる。

チェックアウトこのリンクを http://api.jqueryui.com/autocomplete/#option-source

あなたは以下のコードAPIドキュメントから

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

で試すことができます、私は、コールバック関数としてsourceを使用してお勧めします。

機能：第三の変形、コールバックは、最大限の柔軟性を提供し、JSONPを含む、オートコンプリートに任意のデータソースに接続するために使用することができます。コールバックには、

A requestオブジェクトがあり、現在はテキスト入力にある値を参照します。これは1つのtermプロパティを持ちます。たとえば、市区町村に"new yo"と入力すると、オートコンプリート用語は"new yo"になります。

responseコールバック.1つの引数を必要とする：ユーザーに示唆するデータ。このデータは、提供された用語に基づいてフィルタリングされるべきであり、単純なローカルデータについて上述したいずれかのフォーマットにすることができる。要求中にエラーを処理するためにカスタムソースコールバックを提供する場合は重要です。エラーが発生した場合でも、必ずresponseコールバックをコールする必要があります。これにより、ウィジェットは常に正しい状態になります。

また、あなたのソース配列がlabelとvalueが含まれている必要があり、それはより多くのデータを持つことができ、まだこれら二つは必須です。カスタムデータの詳細を参照してください：ワーキング例

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

：：私はのようなものを助言する

http://jqueryui.com/autocomplete/#custom-datahttps://jsfiddle.net/Twisty/urtkxo46/