我写了一个Bootstrap / jQuery函数,当您搜索一个项目时,它将显示与您键入的内容匹配的项目。
但是,在用户找到该项目之后,我很难将其填充到搜索字段中,或者只是向用户验证它是否被选中。我添加了一些代码,但是当我单击其中的框时,没有任何反应。我的最终目标是使鼠标悬停在框上时突出显示该框,或者在单击该区域后将其选中。
$(document).ready(function() {
$("#myList").toggle();
$("#myInput").on("focus", function() {
$("#myList").toggle();
});
$("#myInput").on("focusout", function() {
// Here, it'll wait 100 miliseconds to hide the list.
setTimeout(function() {
$("#myList").toggle();
}, 100);
});
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
// This is the code to populate the field after selecting an option.
$("li").click(function() {
var textInfo = $(this).text();
$("#myInput").val(textInfo);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Filterable List</h2>
<p>Type something in the input field to search the list for specific items:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<ul class="list-group" id="myList">
<li class="list-group-item">First item</li>
<li class="list-group-item"><a data-toggle="tab" href="#tab1" id="Tabtab1Link">Your boy</a></li>
<li class="list-group-item"><a href="#">Your boy</a></li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth</li>
</ul>
</div>
这是协调事件的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Filterable List</h2>
<p>Type something in the input field to search the list for specific items:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<ul class="list-group" id="myList">
<li class="list-group-item">First item</li>
<li class="list-group-item"><a data-toggle="tab" href="#tab1" id="Tabtab1Link">Your boy</a></li>
<li class="list-group-item"><a href="#">Your boy</a></li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth</li>
</ul>
</div>
<style>
.list-group-item {
cursor: pointer;
}
.list-group-item:hover {
background: #f0f8ff;
}
</style>
<script>
$(document).ready(function () {
$("#myList").hide();
$("#myInput").on("focus", function () {
$("#myList").show();
search($(this));
});
/*$("#myInput").on("focusout", function () {
// Here, it'll wait 100 miliseconds to hide the list.
setTimeout(function () {
$("#myList").toggle();
}, 500);
});*/
$("#myInput").on("keyup", function () {
search($(this));
});
function search(elm) {
var value = elm.val().toLowerCase();
$("#myList li").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
}
// This is the code to populate the field after selecting an option.
$("li").click(function () {
var textInfo = $(this).text();
$("#myInput").val(textInfo);
$("#myList").toggle();
});
$("*").click(function (e) {
e.stopPropagation();
if (($(this).attr('id') != "myInput") && (!$(this).hasClass('list-group-item'))) $("#myList").hide();
});
});
</script>
</body>
</html>