jQuery自动完成小部件“ select（event，ui）”

Question

我将jQuery用于自动完成搜索栏

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/black-tie/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

在搜索栏中键入搜索结果时，会弹出一个结果列表（自动完成），它会自动聚焦于第一个结果。 （这就是我要的）

当我的鼠标（左键）第一个结果单击它指引我到正确的页面（ href看看我的JS代码）。 （这就是我要的）

当我按Enter ，第一个（聚焦的）搜索结果将在搜索栏中显示出来，而不是将我重定向到正确的页面。

我在考虑“ select（event，ui）”时如何解决此问题。

我的JavaScript

 $(function() {   
      var projects = [{
        label: "Bitcoin (BTC)",
        icon: "./alt/alt_logo/bitcoin.png",
        href: "./alt/alt_info/bitcoin.html"
      }, {
        label: "Ethereum (ETH)",
        icon: "./alt/alt_logo/ethereum.png",
        href: "./alt/alt_logo/ethereum.html"
      }, {
        label: "Litecoin (LTC)",
        icon: "./alt/alt_logo/litecoin.png",
        href: "./alt/alt_logo/litecoin.html"
      }, {
        label: "Cardano (ADA)",
        icon: "./alt/alt_logo/cardano.png",
        href: "./alt/alt_logo/cardano.html"
      }];

              $(".field_values").autocomplete({

/*testing*/
  select: function(ul, item) {
    if (e.which == 13)  {
        alert ("hello world!");
        }
  },
/*testing*/
                autoFocus: true,
                source: projects,
                create: function() {
                  $(this).data('ui-autocomplete')._renderItem = function(ul, item) {
                    return $('<li>')
                      .append('<a href="' + item.href + '"><img class="icon" src="' + item.icon + '" />'  + item.label + '</span>' + '<br>'  + '</a>')
                      .appendTo(ul);
                  };
                }  
              });  
    });

感谢您的阅读和帮助，如果您需要更多信息，请告诉我。

Answer 1

参考jQuery API文档 ，您可以使用select属性；

$(".field_values").autocomplete({
    autoFocus: true,
    source: projects,
    create: function() {
        $(this).data('ui-autocomplete')._renderItem = function(ul, item) {
            return $('<li>')
              .append('<a href="' + item.href + '"><img class="icon" src="' + item.icon + '" />'  + item.label + '</span>' + '<br>'  + '</a>')
              .appendTo(ul);
        };
    },
    select: function(event, ui) {
        $(this).first().click();
    }
});