페이지의 임의의 수의 입력 필드로 자동 완성

Question

.train 클래스로 모든 입력 필드에서 작동하는이 Ajax 자동 완성 함수가 있습니다. 그러나 .suggest_q 클래스로 전달되는 제안은 사용되는 .train 필드뿐만 아니라 각 .train 입력 필드 옆에있는 모든 .suggest_q에 표시됩니다. 저는 .click 함수 근처에서 .train 대신에 'this'를 사용하고 있기 때문에 정확한 선택자를 사용하고 있다고 생각합니다.하지만 여전히 문제가 있습니다. 이 함수는 사용자가 사용중인 .suggest_q 및 .train 클래스에서만 작동하고 다른 클래스는 제안 사항을 표시하지 않게하려고합니다. 자동 완성 기능을 사용하여 .train 및 .suggest_a를 입력하는 가장 좋은 방법은 무엇입니까? 여기

은 추가 새 .train 입력 필드 내 아약스 코드 :에서 HTML

<div id="p_scents"> 
    <input type="text" class="train" size="20" autocomplete="off" name="train[]" /> 
       <div id="suggest_q" class="suggest_q"> 

       </div> 

</div> 

Answer 1

여기

<script type="text/javascript"> 
$(function() { 
     var scntDiv = $('#p_scents'); 
     var i = $('#p_scents p').size() + 0; 

     $('#addScnt').live('click', function() { 
       $('<p><input type="text" name="train[]" autocomplete="off" class="train" /><span class="suggest_q" id="suggest_q"></span><a href="#" id="remScnt">Remove train</a></p>').appendTo(scntDiv); 
       i++; 
       return false; 
     }); 

     $('#remScnt').live('click', function() { 
       if(i > 2) { 
         $(this).parents('p').remove(); 
         i--; 
       } 
       return false; 
     }); 
}); 
</script> 

는 아약스 자동 완성 코드 여기

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".train").each(function(index, element) { 
     $(".train").live("keyup", function() { 
     $(".suggest_q").html(""); 
      var train = $(this).val(); 
      train = $.trim(train); 
      if(train) 
      { 
       $.ajax({ 

        url: "train_ajax_query.php", 
        data: "train="+train, 
        success: function(msg) { 
         $(".suggest_q").html(msg); 
         $(".suggest_q ul li").mouseover(function() { 
          $(".suggest_q ul li").removeClass("hover"); 
          $(this).addClass("hover"); 
         }) 
         $(".suggest_q ul li").click(function() { 
          var value = $(this).html(); 
          $(element).val(value); 
          $(".suggest_q ul li").remove(); 
         }); 

        } 
       }); 
      } 
     }); 
    }); 

}); 

</script> 

에게 있습니다 귀하의 코드 자동 완성, 당신은 글로벌 선택기를 사용합니다. 선택한 요소를 저장 한 다음이 변수를 사용해야합니다.

//Changed the live call for an on call since live is deprecated. 
$(document).ready(function() { 
    $("#p_scents").on("keyup", '.train', function() { 
    //we save vars with the objects we want to work with. 
    var selectedTrain = $(this); 
    var selectedSuggest = $(this).siblings('.suggest_q'); 
    selectedSuggest.html(""); 
    var train = selectedTrain.val(); 
    train = $.trim(train); 
    if(train) { 
     $.ajax({ 
     url: "train_ajax_query.php", 
     data: "train="+train, 
     success: function(msg) { 
      //the variables here should still be valid, unless you start more than one ajax 
      //call simultaneously. 
      selectedSuggest.html(msg); 
      selectedSuggest.find("ul li").mouseover(function() { 
      // This can happen when the variable selectedSuggest is no longer valid 
      //for example, when another try has been done on another .train 
      $(this).siblings("li").removeClass("hover"); 
      $(this).addClass("hover"); 
      }); 
      selectedSuggest.find("ul li").click(function() { 
      var value = $(this).html(); 
      //again, the vars can have changed here, since the click can be a long time 
      //after the event registration 
      $(this).parents('.suggest_q').siblings('input').val(value); 
      $(this).parents('.suggest_q').find("li").remove(); 
      }); 
     } 
     }); 
    } 
    }); 
}); 

코드는 테스트되지 않았지만 제대로 작동해야합니다. 어떤 오류라도 발견하면 의견을 남겨주세요. 나는 편집 할 것입니다.