Question

我已经使用jquery设置了自动完成搜索栏。当我输入一个searchterm的一部分弹出建议时，当我点击建议时，我会被重定向到一个好的新页面（建议）。

当我输入searchterm的一部分并按ENTER时，第一个搜索结果会显示在搜索栏中。

但是当我按Enter时，我想重定向到新页面（第一个建议）。

我该如何解决这个问题？

我的HTML：

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


<div class="searchbar">
    <input class="field_values"  id="autocomplete" placeholder="Search..."/>
    <button type="submit" id="searchbutton" class="icon" onclick = ""><i class="fa fa-search"></i></button>
</div>

我的Javacript：

$(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/bitcoin.png"
  }];

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

感谢阅读，希望有人能帮助我！

PS： - 不要介意javascript中的虚拟href

Answer 1

<button type="submit" id="searchbutton" class="icon" onKeydown=”Javascript: if (event.keyCode==13) create();><i class="fa fa-search"></i></button>

调用create（）onKeydown事件并检查keycode = 13

Javascript自动完成HREF链接（jquery）

1 个答案: