javascript - 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 documentation ，您可以使用 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();
    }
});