如何在自动完成下拉列表中选择第一个元素答案

【问题标题】：How To Select First Element in AutoComplete dropdown list如何在自动完成下拉列表中选择第一个元素
【发布时间】：2017-08-03 21:07:42
【问题描述】：

如果没有元素，谁能帮我选择自动完成下拉列表的第一个元素被选中？我试过自动对焦。为关键董事会活动工作。如果我使用鼠标，第一个元素不会选择自动聚焦的元素。

【问题讨论】：

什么样的自动完成？ jQuery？引导程序？你能添加一些你到目前为止尝试过的代码吗？
只需访问 www.redbus.in 并开始输入城市名称。不要输入完整的城市名称并转到下一个字段。即使您没有自动输入完整的城市名称，也会选择第一个。就像我需要的一样。谢谢你的回复。
我打开了一个类似的问题，因为这里建议的答案对我不起作用。见：stackoverflow.com/questions/44591954/…
Select first jquery UI result automatically的可能重复

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

【解决方案1】：

访问here获取答案

$('#txt_search_city').autocomplete({
source: url,
delay: 0,
autoFocus: true,
select: function( event, ui ) {
    $( "#id_city" ).val( ui.item.id );
    $(this).closest('form').submit();
},
focus: function( event, ui ) { event.preventDefault(); }
});

【讨论】：

【解决方案2】：

您可以覆盖focus 事件以使用焦点项的值填充文本框：

$("#autocomplete2").autocomplete({
    // ...
    focus: function (event, ui) {
        $(this).val(ui.item.value);
    }
});

Demo here

【讨论】：

【解决方案3】：

只需使用自动对焦选项：http://bugs.jqueryui.com/ticket/7419

【讨论】：

【解决方案4】：

使用

$('selector').autocomplete({selectFirst:true});

【讨论】：

这是从哪里来的？我在 jquery ui 源或文档中找不到对 selectFirst 的任何引用。

【解决方案5】：

http://jqueryui.com/autocomplete/#custom-data

查看以上链接中的示例代码。希望这会有所帮助。

$( "#project" ).autocomplete({
  minLength: 0,
  source: projects,
  focus: function( event, ui ) {
    $( "#project" ).val( ui.item.label );
    return false;
  },
  select: function( event, ui ) {
    $( "#project" ).val( ui.item.label );
    $( "#project-id" ).val( ui.item.value );
    $( "#project-description" ).html( ui.item.desc );
    $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
    return false;
 }

})

【讨论】：

【解决方案6】：

你必须触发 jquery 的 select 事件来选择第一个选项。

$("#ElementID").autocomplete({
      source: availableList
 })._trigger('select');

您可以在这里找到详细答案：Language Lassi: Select first option using jQuery Autocomplete

【讨论】：