如何在建議中顯示值而不是標簽jquery自動完成和搜索應基於標簽字段處理

Question

這是我正在使用jquery auto complete 的當前工作操作的圖像 。 但是我的問題是當我鍵入item1時，它顯示item1作為建議。 我想顯示何時我輸入item1應該在建議框中顯示zzz1。 我的代碼在這里。

<input name="jobCat" id="jobCat" value="" type="text" placeholder="Search category by keyword"/>
<script>
$(function() {
var datasource = [
{ "label": "item1", "value": "zzz1", "id": 1 },
{ "label": "item2", "value": "zzz2", "id": 2 },
{ "label": "item3", "value": "zzz3", "id": 3 }];
$("#jobCat").autocomplete({
        source: datasource,
        select: function (event, ui) { }
});
</script>

Answer 1

編輯，我在文檔中發現了一些有用的東西...因為建議中包含值而不是標簽。

 var datasource = [ { "label": "item1", "value": "zzz1", "id": 1 }, { "label": "item2", "value": "zzz2", "id": 2 }, { "label": "item3", "value": "zzz3", "id": 3 }]; $("#jobCat").autocomplete({ source: datasource, }).autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<div>" + item.value + " - ID: " + item.id + "</div>" ) .appendTo( ul ); }; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <input name="jobCat" id="jobCat" value="" type="text" placeholder="Search category by keyword"/>