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

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

1 个答案: