如何将li项目中的值设置到搜索字段框中?

问题描述 投票:0回答:1

我写了一个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>
javascript jquery bootstrap-4
1个回答
0
投票

这是协调事件的问题。

<!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>
© www.soinside.com 2019 - 2024. All rights reserved.