jQueryを使用して複数のテキストフィールドを持つクラスをターゲットにする方法

Question

私はphpでテキストフィールドを生成しています。
したがって、ユーザーに応じて、1つのテキストフィールド、3つのテキストフィールド、5つのテキストフィールド、多くのものを出力することができます。
これらのテキストフィールドのそれぞれで、私はajax検索を実行したいと思います。
各テキストフィールドは、正確に同じデータベーステーブルを検索します。
私は、テキストフィールドの各IDに1から始まる番号を付けておいたが、そこには多くのテキストフィールドがある。
問題は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コードされています。ここでは

<?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です：

<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>