Question

我正在尝试对指定供应商的产品进行实时搜索。

我有一个输入元素，其中包含要输入的供应商名称：

filter

我有以下输入元素和无序列表元素

withoutMultiples :: Integer -> [Integer] -> [Integer]
withoutMultiples a = filter (\b -> b `mod` a /= 0)

我使用JQuery $ .ajax和JQuery .keyup（）函数从数据库中使用live list elements 动态填充 ul元素。

用于此目的的Javascript和JQuery是：

<input title="supplier">

这整个设置填充了 ul元素，产品名称为 li elements ，，但我不知道如何选择其中一种产品或< b> li elements 并将其传递给另一个表中的另一个输入元素，该表应该使用产品名称。

任何人都可以指导我如何正确地做到这一点吗？

Answer 1

	var sampleData = ['Product 1', 'Product 2', 'Product 3'];

	function setSupplier() {
		$('#supplier').val($(this).text());
	}
	$("#search").on('input keyup', function () {
		var val = $(this).val().trim();
		if (!val.length) {
			$("#here").empty().hide();
			return;
		}
		$.ajax({
			type: 'GET',
			url: 'http://echo.jsontest.com/key/value/one/two',
			data: {
				q: val
			},
			success: function (res) {
				$("#here").empty().show();
				if ($("#here").data('state') === 'focusout') {
					$("#here").hide();
					return;
				}
				var items = sampleData.slice();
				for (var i = 0; i < items.length; i++) {
					var li = $(document.createElement("li")).html(items[i] + ' ( ' + val + ' )').appendTo("#here");
					li.on('mousedown', setSupplier);
				}
			}
		});
	}).on('focusin', function () {
		if ($("#here").children().length) {
			$("#here").show();
		}
		$("#here").data('state', 'focusin');
	}).on('focusout', function () {
		if (!$(this).val().trim().length) {
			$("#here").empty();
		}
		$("#here").data('state', 'focusout').hide();
	});

#here li:hover {
  background: #ccc;
  cursor: pointer;
}

#here {
  list-style-type: none;
  padding: 5px 10px;
}

<input type="search" name="search" id="search" placeholder="Type a supplier name">
<input type="input" id="supplier" style="margin-top: 20px" readonly>

<ul id="here" style="position: fixed; background-color: white; width:175px; height:300px; border: 1px solid grey; display:none;"></ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何通过在<ul>元素中悬停并单击它们来选择<li>元素

1 个答案: