输入以选择并激活 href 链接

Question

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

我遇到的问题是，当我输入搜索词的一部分或完整搜索词时，没有任何操作。

我想要的是：当我输入搜索词或搜索词的一部分并按 Enter 键时，我会被重定向到第一个建议的页面。当我将鼠标悬停在建议上时，现在按 Enter，第一个建议就会出现在搜索栏中。

我该怎么办？

Javascript 代码：

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

$(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"
  }, {
    label: "Litecoin (LTC)",
    icon: "./alt/alt_logo/litecoin.png",
    href: "./alt/alt_logo/bitcoin.png"
  }, {
    label: "Cardano (ADA)",
    icon: "./alt/alt_logo/cardano.png",
    href: "./alt/alt_logo/bitcoin.png"
  }];  

  $(".field_values").autocomplete({
    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 + '<br>'  + '</a>')
          .appendTo(ul);
      };
    }
  });
});

PS：不要介意 var projects 中的错误 href

编辑：

当我通过按 Enter 或点击按钮提交表单时。页面重新加载，但保持在同一页面上。

HTML：

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

我也尝试了<form action="./js/searchbar.js">，但这只是将我发送到一个显示 javascript 的网页

Answer 1

您需要将autoFocus: true, 添加到autocomplete 这样就变成了：

$("#field_values").autocomplete({
    autoFocus: true,
    source: projects,

这只会将数据放入表单域。

---

要处理数据，您需要执行以下操作：

1. 将输入包装在form标签中

2. 确保表单中有提交按钮

然后您可以按 Enter 键填写该字段，并且您必须再次按 Enter 键才能提交表单。