我已经使用jquery设置了自动完成搜索栏。当我输入一个searchterm的一部分弹出建议时,当我点击建议时,我会被重定向到一个好的新页面(建议)。
我遇到的问题是当我键入searchterm的一部分或完整的searchterm时,没有任何操作。
我想要的是:当我键入searchterm或searchterm的一部分时,按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 href
projects
编辑:
按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的网页
答案 0 :(得分:0)
您需要将autoFocus: true,
添加到autocomplete
所以它变成了:
$("#field_values").autocomplete({
autoFocus: true,
source: projects,
这只会将数据放入表单字段中。
要处理数据,您需要执行以下操作:
form
标记确保您有
形式的提交按钮
然后您可以按Enter键填写该字段,然后您必须再次按Enter键才能提交表单。