如何选择 <li> 通过将鼠标悬停并在 <ul> 元件

Question

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

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

<input title="supplier">

I have the following and

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 dynamically with live 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 with the product names as , but I do not know how to select one of these products or 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 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>