如何選擇 <li> 通過將鼠標懸停並在 <ul> 元件

Question

我正在嘗試實時搜索指定供應商的產品。

我有一個輸入元素 ，其中要輸入供應商名稱：

<input title="supplier">

我有以下輸入元素和無序列表元素

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>

我正在使用JQuery $ .ajax和JQuery .keyup（）函數使用數據庫中的活動列表元素動態填充ul元素 。

為此目的，JavaScript和JQuery是：

$(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();})

. 整個設置將使用產品名稱作為li元素填充ul 元素 ， 。

誰能指導我如何正確執行此操作？

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>