Comment afficher les valeurs dans la suggestion au lieu de l'étiquette jquery autocomplete et la recherche devrait être processus sur la base de la zone d'étiquette

Question

Here is the image of current working operation J'utilise jquery auto complete. Mais mon problème est quand je tape item1 il montre item1 comme suggestion. Et je veux montrer quand je tape item1 est devrait montrer zzz1 dans la boîte à suggestions. Mon code est ici.

<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

Edition, je l'ai trouvé quelque chose dans USEFULL la documentation ... Pour avoir les valeurs dans les suggestions, au lieu des étiquettes.

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