<!--Search Bar-->
<div class="dropdown" style=margin-left:500px;margin-top:-40px>
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown_coins" data-toggle="dropdown" >
Set Location
</button>
<div class="dropdown-menu" style=margin-top:20px>
<input type="search" class="form-control" id='locName' placeholder="Search Location" style=margin-top:-60px>
</form>
</div>
</div>
<!--AutoComplete Search bar-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$(function() {
$("#locName").autocomplete({
source: [
"Adugodi",
"Arekere",
"Attiguppe",
"Yelahanka"
],
minLength: 1,
function(event) {
var value = event.getAttribute('value')
var locName = document.getElementById("locName").value;
if (value.includes('&')) {
value = value.replace("&", "%26");
}
if (locName == "") {
alert("Please Select your Location");
} else {
window.location = "http://www.example.com
}
return false;
}
});
});
</script>我已经在我的网站中实现了自动完成搜索栏。单击下拉按钮时，我的输入搜索字段将出现在用户可以输入数据中。输入位置后，我的下拉按钮应反映我在输入文本字段中输入的相同数据，但此处我的下拉按钮再次显示 选择位置。请帮助我摆脱这个 我是此字段的新手
有一些语法错误 - 缺少标记。 没有结束引号和 ;example.com 之后。 我无法理解自动完成中的值部分，它也给出了错误。所以我已经评论掉了。休息在工作。希望这有帮助..
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
setLocation();
});
var cities = [
"Adugodi",
"Arekere",
"Attiguppe",
"Yelahanka"
];
function setLocation() {
$( "#locName" ).autocomplete({
source: cities,
minLength: 1,
autoFocus:true,
select: function(event, ui) {
//var value = event.getAttribute('value');
var locName = document.getElementById("locName").value;
//if (value.includes('&')) {
// value = value.replace("&", "%26");
//}
console.log( ui.item.label);
if (locName === "") {
alert("Please Select your Location");
} else {
document.getElementById("locName").value = ui.item.label;
document.getElementById("dropdown_coins").innerHTML = "Set Location - " + ui.item.label;
window.location = "http://www.example.com";
}
return false;
}
});
}
function checkLocation() {
var locName = document.getElementById("locName").value;
if (locName === "") {
alert("Please Select your Location");
document.getElementById("locName").focus();
} else {
var n = cities.includes(locName);
if(!n) {
alert("Sorry! No such location. Please select location.");
document.getElementById("locName").value = "";
document.getElementById("dropdown_coins").innerHTML = " Set Location ";
document.getElementById("locName").focus();
}
setLocation();
}
}
</script>
</head>
<body>
<!-- HTML -->
<div class="dropdown" style=margin-left:500px;margin-top:40px>
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown_coins" data-toggle="dropdown" onclick="checkLocation();" >Set Location</button>
<div class="dropdown-menu" style=margin-top:20px>
<form>
<input type="search" class="form-control" id='locName' placeholder="Search Location" style=margin-top:-60px>
</form>
</div>
</div>
</body>
</html>