jQuery-ui 自动完成,选择第一项

Posted

技术标签:

【中文标题】jQuery-ui 自动完成,选择第一项【英文标题】:jQuery-ui autocomplete, select first item 【发布时间】:2017-08-06 11:22:52 【问题描述】:

我在我的 rails 应用程序中使用 jQuery-ui 自动完成功能。当我输入一些输入时,我希望它自动选择自动完成框中的第一项。我应该如何实现这个?

jQuery(function() 
    return $('#transaction_receiver_name').autocomplete(
        source: $('#transaction_receiver_name').data('autocomplete-source')
    );
);

我的 CSS

.ui-helper-hidden-accessible 
  display: none;


ul.ui-autocomplete 
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  border: solid 1px #999;
  cursor: default;
  li 
    background-color: #FFF;
    color: black;
    border-top: solid 1px #DDD;
    margin: 0;
    padding: 0;
    a 
      color: #000;
      display: block;
      padding: 3px;
    
    a.ui-state-hover, a.ui-state-active 
      background-color: #FFFCB2;
    
  

Input field

【问题讨论】:

为什么不利用open 回调来完成这个。 【参考方案1】:

您只需添加autoFocus: true,它会自动选择列表中显示的第一个元素。

jQuery(function() 
    return $('#transaction_receiver_name').autocomplete(
        source: $('#transaction_receiver_name').data('autocomplete-source'),
        autoFocus: true
        

    );
);

这是一个例子:

$(function() 
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "javascript",
    "Lisp",
    "Perl",
    "php",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $("#tags").autocomplete(
    source: availableTags,
    autoFocus: true,
    focus: function(event, ui) 
      event.preventDefault();
      //Here you can add anycode you want to be executed when an item of the box is selected
    ,
    select: function(event, ui) 
      event.preventDefault();
     //Code here will be executed when an item is clicked on 
    
  );
);
/* this will change the style of the selected element of the box*/

.ui-autocomplete .ui-menu-item .ui-state-active 
  color: blue;
  background: red;
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="tags">

【讨论】:

不确定是否正确:如果设置为 true,则显示菜单时第一项将自动聚焦。 这会将焦点设置在第一项上,但不会选择它并关闭菜单。 @Chiller 这个想法对我来说很好,除了focus 部分。这是因为$(this).autocomplete("close"); 在看到任何内容之前就关闭了该框,而$(this).val(ui.item.key); 删除了文本字段中的值 @EgonMeijers 你想让它只关注盒子的第一项还是你需要它来做其他事情? @Chiller 添加了菜单框的图片,标题说明了一切 @Chiller 回答您的问题【参考方案2】:

当菜单打开时,您可以收集第一个列表项并将其用作值。例如:

jQuery(function() 
  return $('#transaction_receiver_name').autocomplete(
    source: $('#transaction_receiver_name').data('autocomplete-source'),
    open: function(e, ui)
      var first = $(".ui-menu-item:eq(0) div").html();
      $(this).val(first);
      return false;
    
  );
);

这是未经测试的。

另一种方法是触发点击第一个元素。

jQuery(function() 
  return $('#transaction_receiver_name').autocomplete(
    source: $('#transaction_receiver_name').data('autocomplete-source'),
    open: function(e, ui)
      $(".ui-menu-item:eq(0)").trigger("click");
      return false;
    
  );
);

【讨论】:

第一种方法会在输入第一个字母时立即添加列表中的第一项,如果您删除了例如中途的单词,它将再次自动完成。第二种方法不显示项目列表。它只会像第一个方法一样添加列表中的第一项。 如果项目列表已经可见,第二种方法适用于我。

以上是关于jQuery-ui 自动完成,选择第一项的主要内容,如果未能解决你的问题,请参考以下文章

Jquery-ui自动完成选定的值

jquery ui自动完成仅显示数据库中的第一项

如何在引导侧导航顶部显示 jQuery-ui 自动完成?

jQuery-UI 自动完成不会显示在 jQuery-UI 对话框中

单独更改 jquery-ui 自动完成小部件的宽度

带有嵌套属性的 Rails Jquery-ui 自动完成