Jquery Multiple ID ERROR

Question

当我在输入框中输入数据时，相同的数据同时插入所有输入框中。当单击此输入框时，此处id="genric_search"，它也适用于第二个输入框。但是我需要动态插入。

      **<!--its a first input box-->**
     <label>Genric Name</label>
     <input   id="genric_search" name="gname[]"  type="text">
     <div id="suggesstion-box-genric"></div>

    **<!--its a 2nd input box-->**
     <label>Genric Name</label>
     <input   id="genric_search" name="gname[]"  type="text">
     <div id="suggesstion-box-genric"></div>

    Jquery
    <script>
    $(document).ready(function(){
        $('[id="genric_search"]').keyup(function(){
            $.ajax({
                type: "POST",
                url: "search.php",
               /* data:'genric='+$(this).val(),*/
                data:'genric='+$(this).val(),
                beforeSend: function(){
                    $('[id="genric_search"]').css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
                },
                success: function(data){
                    $('[id="suggesstion-box-genric"]').show();
                    $('[id="suggesstion-box-genric"]').html(data);
                    $('[id="genric_search"]').css("background","#FFF");
                }
            });
        });
    });
    function selectmdc(val) {
        $('[id="genric_search"]').val(val);
        $('[id="suggesstion-box-genric"]').hide();
    }
    </script>
       **Error Report**

在此处输入图像描述

Answer 1

使用id instead类，因为在HTML页面中应该是唯一的。然后，您可以将此与 this 结合使用以定位正确的上下文，并使用next在输入后获取div。

.JS

$(document).ready(function() {
  $('.genric_search"').keyup(function() {
    var $thisInput = this;
    $.ajax({
      type: "POST",
      url: "search.php",
      /* data:'genric='+$(this).val(),*/
      data: 'genric=' + $(this).val(),
      beforeSend: function() {
        $thisInput.css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
      },
      success: function(data) {
        var $inputDiv = $thisInput.next('.suggesstion-box-genric');
        $inputDiv.show();
        $inputDiv.html(data);
        $thisInput.css("background", "#FFF");
      }
    });
  });
});

.HTML

 **<!--its a first input box-->**
     <label>Genric Name</label>
     <input name="gname[]"  type="text" class="genric_search">
     <div class="suggesstion-box-genric"></div>

    **<!--its a 2nd input box-->**
     <label>Genric Name</label>
     <input   class="genric_search" name="gname[]"  type="text">
     <div class="suggesstion-box-genric"></div>