如何在建议中显示值而不是标签 jquery 自动完成和搜索应该在标签字段的基础上进行

Question

Here is the image of current working operation 我正在使用 jquery 自动完成。但我的问题是，当我键入 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

编辑，我在 documentation... 中找到了一些有用的东西，因为建议中有值，而不是标签。

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

如何在建议中显示值而不是标签 jquery 自动完成和搜索应该在标签字段的基础上进行

How to show values in suggestion instead of label jquery autocomplete and search should be process on the basic of label field

javascript

jquery

autocomplete

search-suggestion