jQuery를 사용하여 여러 텍스트 필드를 사용하여 클래스를 대상으로 지정하는 방법

Question

PHP를 통해 텍스트 필드를 생성 중입니다.
그래서 사용자에 따라 1 개의 텍스트 필드, 3 개의 텍스트 필드, 5 개의 텍스트 필드를 출력 할 수 있습니다.
각 텍스트 필드에서 아약스 검색을 수행하려고합니다.
각 텍스트 필드는 정확하게 동일한 데이터베이스 테이블을 검색합니다.
텍스트 필드의 각 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 코드는 다음과 같습니다

이

<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 JQuery와 아약스됩니다

<?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>"; 

:

이

루프에 출력되는 텍스트 필드에 대한 코드입니다 :

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