获取搜索结果来显示ul输入的文本字段

Question

我想用类而不是ID来使用jQuery，因为我将处于这样一种情况，即根据用户输入而生成由php生成的相同文本字段。当用户开始输入时，会出现一个加载器，然后第四个按键输出结果将通过php/ajax显示在无序列表中。我遇到的问题是，当用户输入到文本字段中时，对于文本字段1和2，无序列表都会显示，因为它应该只出现在输入的任何文本字段中。

我试过类似的东西，但它不会产生任何结果，并且控制台不会给我任何错误。

$(".result").closest("ul").html(data); 

下面是完整的代码（HTML）

<div class="form-group"> 
<input type="text" name="name" autocomplete="off"> 
<div class="result"></div> 
</div> 
<div class="form-group"> 
<input type="text" name="name" autocomplete="off"> 
<div class="result"></div> 
</div> 

jQuery的

$(document).ready(function() { 
$("input").keyup(function() { 
    var input = $(this).val(); 
    $(".loader").show(); 
    if (input.length > 3) { 
     $.ajax({ 
      type: 'POST', 
      url: 'insert-ajax.php', 
      data: { 
       name: input 
      }, 
      success: function(data) { 

       if (!data.error) { 
        //$(".result").html(data); 
        $(".result").closest("ul").html(data); 
        $(".loader").hide(); 
       } 
      } 

     }); 
    } 

    if (input.length < 1) { 
     $(".loader").hide(); 
     $(".result").html(""); 
    } 
}); 

$(".result").on("click", "li", function() { 
    console.log($(this).text()); 
    $(this).closest(".result").siblings("input").val($(this).text()); 
}); 

}); 

PHP呼应UL和李

while($row = $result->fetch_assoc()) { 
      $search_result = $row['short_desc']; 
      echo "<ul>"; 
      echo "<li>" . $search_result . "</li>"; 
      echo "</ul>"; 

Answer 1

那么你的所有选择.result在你的更新中，你可以se jQuery.ajax中的上下文来定位特定元素

$.ajax({ 
     type: 'POST', 
     url: 'insert-ajax.php', 
     context: this, 
     data: { 
      name: input 
     }, 
     success: function(data) { 

      if (!data.error) { 
       $(this).html(data); 
       $(".loader").hide(); 
      } 
     } 

    });