Javascript jQuery ui自动完成，选择第一项

我在rails应用程序中使用jQueryUIAutoComplete。当我键入一些输入时，我希望它自动选择自动完成框中的第一项。我应该如何实现这一点

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;
    }
  }
}

---

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

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(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;
    }
  });
});

---

您只需添加

autoFocus:true

，它就会自动选择列表中显示的第一个元素

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

    });
});

以下是一个例子：

$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#标记”）.autocomplete({
资料来源：availableTags，
自动对焦：对，
焦点：功能（事件、用户界面）{
event.preventDefault（）；
//在这里，您可以添加选择框中某个项目时要执行的任何代码
},
选择：功能（事件、用户界面）{
event.preventDefault（）；
//单击某个项目时，将执行此处的代码
}
});
});
/*这将更改框中选定元素的样式*/
.ui自动完成.ui菜单项.ui状态处于活动状态{
颜色：蓝色；
背景：红色；
}
您只需添加
自动对焦：true
，它将自动选择列表中显示的第一个元素

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

    });
});

以下是一个例子：


$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#标记”）.autocomplete({
资料来源：availableTags，
自动对焦：对，
焦点：功能（事件、用户界面）{
event.preventDefault（）；
//在这里，您可以添加选择框中某个项目时要执行的任何代码
},
选择：功能（事件、用户界面）{
event.preventDefault（）；
//单击某个项目时，将执行此处的代码
}
});
});
/*这将更改框中选定元素的样式*/
.ui自动完成.ui菜单项.ui状态处于活动状态{
颜色：蓝色；
背景：红色；
}

为什么不使用
open
回调来完成此操作。为什么不使用
open
回调来完成此操作。不确定是否正确：如果设置为
true
，当显示菜单时，第一项将自动聚焦。这将在第一项上设置焦点，但不会选择它并关闭菜单。@collinger这个想法对我来说很好，除了
焦点
部分。这是因为
$（This）.autocomplete（“close”）
在看到任何内容和
$（this）.val（ui.item.key）之前关闭该框删除文本中的值field@EgonMeijers你是想让它只关注菜单框的第一项，还是想让它做其他事情？@collinger添加了一张菜单框的图片，标题解释了这一点all@Chiller回答：不确定是否正确：如果设置为
true
，则当显示菜单。这将在第一项上设置焦点，但不会选择它并关闭菜单。@collinger这个想法对我来说很好，除了
焦点
部分。这是因为
$（This）.autocomplete（“close”）
在看到任何内容和
$（this）.val（ui.item.key）之前关闭该框删除文本中的值field@EgonMeijers你是想让它只关注菜单框的第一项，还是想让它做其他事情？@collinger添加了一张菜单框的图片，标题解释了这一点all@Chiller第一种方法会在键入第一个字母时立即在列表中添加第一项，例如，如果你中途删除了这个词，它会再次自动完成。第二种方法不显示项目列表。它只会像第一种方法一样在列表中添加第一个项目。如果项目列表已经可见，则第二种方法对我有效。第一种方法会在键入第一个字母时立即在列表中添加第一个项目，如果您将该单词删除一半，则会再次自动完成。第二种方法不显示项目列表。它只会像第一个方法一样在列表中添加第一个项目。如果项目列表已经可见，则第二个方法对我有效。