Как установить значение из элемента li в поле поиска? - PullRequest
Новая
       1

Как установить значение из элемента li в поле поиска?

0 голосов
/ 27 сентября 2019

Я написал функцию 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>

1 Ответ

0 голосов
/ 27 сентября 2019

Это вопрос координации событий. 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...