jQuery自动完成显示值而不是标签答案

【问题标题】：jQuery autocomplete shows value instead of labeljQuery自动完成显示值而不是标签
【发布时间】：2016-04-24 22:32:07
【问题描述】：

我正在使用jQuery-ui autocomplete。这是我的使用方法

<form action="go.php" method="post">
    <input id="txt" type="text" />
</form>

<script>
    $('#txt').autocomplete({
         source: [{'label': 'milan', 'value': '1'}, {'label': 'minos', 'value': '2'}]
    })
</script>

当我输入“mi”时，milan 和 minos 会出现。没问题。但是，当我关注它们时，#txt 的向下键值更改为1（米兰的值）而不是milan。当我专注于它时，我如何显示milan。谢谢

【问题讨论】：

标签： jquery jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

因为 select 事件的默认行为是显示 value 而不是 label，所以您只需：
- return false 为前面提到的“İsmail Hakkı Şen”。
- 或者你可以使用 event.preventDefault() 来阻止事件的默认动作执行，然后写下你需要做的事情如下：

$('#txt').autocomplete({
     source: [{'label': 'milan', 'value': '1'}, {'label': 'minos', 'value': '2'}],
    focus: function( event, ui ) {
      event.preventDefault();
      $('#txt').val(ui.item.label);
    },
    select: function( event, ui ) {
     event.preventDefault();
     $('#txt').val(ui.item.label);
    }
});

请参考这篇文章中的“Andrew Whitaker”回答 > Autocomplete applying value not label to textbox - 因为它对理解很有帮助。

【讨论】：

【解决方案2】：

你必须告诉你的代码专注于做某事。

$('#txt').autocomplete({
     source: [{'label': 'milan', 'value': '1'}, {'label': 'minos', 'value': '2'}],
    focus: function( event, ui ) {
      $(this).val(ui.item.label);
      return false;
    },
    select: function( event, ui ) {
     $(this).val(ui.item.label);
      return false;
    }
});

【讨论】：

我不想完全消除焦点。我只想 #txt 显示标签而不是值
如果您不想显示标签或值，而宁愿将文本框内容保持原样，直到出现项目被选中。