Jqueryオートコンプリート表示名と送信ID

Question

jQueryオートコンプリートを変更して値の代わりにIDを使用するにはどうすればよいですか？ 私は名前のリストを表示したいが、Id値を使って検索を送る。今では名前と適切に動作していますが、IDとして固有の値を見つけようとするとより効果的になると思います。

$.getJSON('Dashboard/CompaniesWithId', function (data) { 
    $.each(data, function (i, item) { 
    sellers[i] = item.Name; 
    sellersID[i] = item.Id; 
    }); 
}).error(function() { 
    console.log("error loading seller to the autocomplete"); 
}); 

$("#searchSeller").autocomplete({ 
    messages: { 
    noResults: 'No sellers with this name',   
    }, 
    minLength: 2, 
    delay: 500, 
    source: sellers, 
}); 

Answer 1

あなたが隠しフィールドを追加し、また、フォーマット[{value: 'value', label: 'label'}]で選択データを使用することができます

http://api.jqueryui.com/autocomplete/#event-select

選択されたIDに隠しフィールドの値を設定するために選択したイベントに使用することができますが、この方法を使用すると、フィールドには、IDの代わりにラベルが表示されます

var availableTags = [ 
 
     {id: 1, label: "ActionScript"}, 
 
     {id: 2, label: "Ruby"}, 
 
     {id: 3, label: "Scala"}, 
 
     {id: 4, label: "Scheme"} 
 
    ]; 
 
    availableTags2 = [ 
 
     {value: 1, label: "ActionScript"}, 
 
     {value: 2, label: "Ruby"}, 
 
     {value: 3, label: "Scala"}, 
 
     {value: 4, label: "Scheme"} 
 
    ]; 
 
    $("#a").autocomplete({ 
 
     source: availableTags, 
 
     select: function(event, ui) { 
 
     $('#tosend').val(ui.item.id); 
 
     } 
 
    }); 
 
    $("#b").autocomplete({ 
 
     source: availableTags2 
 
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script 
 
\t \t \t src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
 
\t \t \t integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" 
 
\t \t \t crossorigin="anonymous"></script> 
 
id to send<br> 
 
<input type="text" name="tosend" id="tosend"><br><br> 
 
type below<br> 
 
<input id="a"><br> 
 
<br> 
 
<br> 
 
using value instead of id<br> 
 
<input id="b">

Answer 2

バックエンドについてはわかりません。ただし、検索パラメータのIDを受け入れると仮定すると、sourceの値をsellersIDに変更すると問題が解決しますか？あなたはまた、ソースの後に余分なカンマを持っています。それはあなたに問題を引き起こすでしょう。

$("#searchSeller").autocomplete({ 
    messages: { 
    noResults: 'No sellers with this ID.',   
    }, 
    minLength: 2, 
    delay: 500, 
    source: sellersID 
});