如何使用jQuery定位具有多個文本字段的類

Question

我正在通過php生成文本字段。
因此，取決於用戶，它可以輸出1個文本字段，3個文本字段，5個文本字段，但是很多。
在每個文本字段中，我想執行ajax搜索。
每個文本字段將搜索完全相同的數據庫表。
我已經設法給每個ID的文本字段的數字從1開始，然後它上升到有很多文本字段。
問題在於CSS。
我試圖使用一個類來設置搜索結果的樣式，但是如果我輸入的不是文本字段，結果將開始在所有文本字段中顯示，而不僅僅是我輸入的那個字段。

這是在環路輸出的文本字段代碼：

<?php 
echo "<input id='search{$item}' name='search[]'type='text' autocomplete='off' onKeyUp='ajax_call(\"{$item}\")'>"; 
echo "<div style='display:none' id='loading{$item}'><img src='functions/loading.gif'/></div>"; 
echo "<ul class='test'></ul>"; 

這裏是jQuery和Ajax的

<script type="text/javascript"> 
$("#loading").hide(); 

function ajax_call(textfield) { 
    var textfield_value = textfield; 
    $("#loading" + textfield_value).show(); 
    var search = $('#search' + textfield_value).val(); 
    if (search.length > 3) { 
     $.ajax({ 
      type: 'POST', 
      url: 'functions/daily-prod/lost-time-search.php', 
      data: { 
       search: search 
      }, 
      success: function(data) { 
       if (!data.error) { 
        $('.test').html(data); 
        $("#loading" + textfield_value).hide(); 
       } 
      } 
     }); 
    } 
    if (search.length < 1) { 
     $('.test').html(''); 
     $("#loading" + textfield_value).hide(); 
    } 
} 
</script> 

CSS：

<style type="text/css"> 
.test { 
    font-size: 15px; 
    margin-left: 10px; 
    width: 50%; 
    margin-top: 0px; 
    background: #f9f9f9; 
    overflow-y: auto; 
    overflow-x: hidden; 
    z-index: 1000; 
} 

.test li { 
    padding: 10px; 
    border-bottom: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    border-left: 1px solid #ddd; 
    list-style-type: none; 
    margin-left: -39px; 
    color: #000000; 
} 

.test li:hover { 
    background: #dddddd; 
    color: red; 
} 
</style> 

生成的HTML代碼：

<input id='search1' name='search[]'type='text' autocomplete='off' onKeyUp='ajax_call("1")'> 
    <div style='display:none' id='loading1'><img src='functions/loading.gif'/> </div> 
    <ul class='test'></ul><input id='search2' name='search[]'type='text' autocomplete='off' onKeyUp='ajax_call("2")'><div style='display:none' id='loading2'> 
    <img src='functions/loading.gif'/></div><ul class='test'></ul><input id='search3' name='search[]'type='text' autocomplete='off' onKeyUp='ajax_call("3")'> 
    <div style='display:none' id='loading3'><img src='functions/loading.gif'/> </div><ul class='test'></ul> 

Answer 1

給<ul class="test></ul>一個id屬性test{$item}並調整函數調用使用$('#test' + textfield_value)就像您對輸入字段所做的那樣。

$("#loading").hide(); 
 

 
function ajax_call(textfield) { 
 
    var textfield_value = textfield; 
 
    $("#loading" + textfield_value).show(); 
 
    var search = $('#search' + textfield_value).val(); 
 
    if (search.length > 3) 
 
    $('#test' + textfield_value).html("<li>" + search + "</li>"); 
 

 
    if (search.length < 1) { 
 
    $('#test' + textfield_value).html(''); 
 
    $("#loading" + textfield_value).hide(); 
 
    } 
 
}

.test { 
 
    font-size: 15px; 
 
    margin-left: 10px; 
 
    width: 50%; 
 
    margin-top: 0px; 
 
    background: #f9f9f9; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    z-index: 1000; 
 
} 
 

 
.test li { 
 
    padding: 10px; 
 
    border-bottom: 1px solid #ddd; 
 
    border-right: 1px solid #ddd; 
 
    border-left: 1px solid #ddd; 
 
    list-style-type: none; 
 
    margin-left: -39px; 
 
    color: #000000; 
 
} 
 

 
.test li:hover { 
 
    background: #dddddd; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id='search1' name='search[]' type='text' autocomplete='off' onKeyUp='ajax_call(1)'> 
 
<div style='display:none' id='loading1'><img src='functions/loading.gif' /></div> 
 
<ul id="test1" class='test'></ul> 
 

 
<input id='search2' name='search[]' type='text' autocomplete='off' onKeyUp='ajax_call(2)'> 
 
<div style='display:none' id='loading2'><img src='functions/loading.gif' /></div> 
 
<ul id="test2" class='test'></ul>