UmarAbbasKhan UmarAbbasKhan - 2 months ago 7
HTML Question

How to select <li> element by hovering and clicking over them in a <ul> element

I am trying to make a live search for the products of a specified supplier.

I have an input element with the Supplier Name to be entered in it:

<input title="supplier">


I have the following Input Element and Un-Ordered List Element

Live Product Search <input type="search" name="search" id="search">
<ul id="here" style="position: fixed; background-color: white; width:175px; height:300px; border: 1px solid grey; display:none; padding:0px 0px 10px 10px; "></ul>


I am populating ul element dynamically with live list elements from database using JQuery $.ajax and JQuery .keyup() function.

Javascript and JQuery for this purpose is:

$(document).ready(function(){
$("#search").keyup(function(){
var y=$('[title="supplier"]').val();
$("#here").show();
var x =$(this).val();
$.ajax({
type: 'GET',
url:'getdataforproductslive.php',
data:{q: x, s: y},
success:function(p)
{
var pr= p.split("|");
for (var option in pr){
var newLi = document.createElement("li");
newLi.innerHTML=pr[option];
{$("#here").append(newLi);}}},
});
$("#here").html("");
});
})
$("#search").blur(function(){$("#here").hide();})


This whole setup is populating the ul element with the product names as li elements, but I do not know how to select one of these products or li elements and pass it to another input element in another table, which is supposed to use the product name.

Can anyone guide me as to how to do this properly?

Answer

	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>

Comments