如何在同一個表單組元素中插入內容？

Question

我試圖通過ajax顯示自動完成（建議）列表使用jQuery的文本框。

這裏我的HTML：

<div class="col-md-6"> 
    <div class="form-group"> 
     <label class="control-label">Depart Location</label> 
     <input type="text" id="flightFrom" name="flightFrom" class="form-control locKeyword" data-rule-required="true"> 
     <div class="suggest-list"></div> 
    </div> 
</div> 

阿賈克斯過程後，我想顯示 '建議清單' 上的Ajax響應。 請注意，該網頁有許多'form-group'類，我想在'form-group'中顯示輸入類型文本框和類爲'locKeyword'。

if ($('.locKeyword').length > 0) { 
    $('.locKeyword').each(function() { 
     $(this).keyup(function(event){ 
      var sKeyword = $(this).val(); 
      if(sKeyword.length){ //IF 1 
       if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){ 
        $.ajax({ 
         'method' :'GET', 
         'url' : 'search.php', 
         data  : "locKeyword="+sKeyword, 
         success : function(msg){  
          if(msg != 0){ 
           $('.locKeyword').closest('.form-group').find('.suggest-list').fadeIn().html(msg); 
          }else{ 
           $(".suggest-list").fadeIn(); 
           $(".suggest-list").html('<div style="text-align:left;">No station found!</div>'); 
          } 
         } 
        }); 
       }else{ 
        switch (event.keyCode) 
        { 
        case 40: 
        { 
          found = 0; 
          $("li").each(function(){ 
          if($(this).attr("class") == "selected") 
           found = 1; 
          }); 
          if(found == 1) 
          { 
          var sel = $("li[class='selected']"); 
          sel.next().addClass("selected"); 
          sel.removeClass("selected"); 
          } 
          else 
          $("li:first").addClass("selected"); 
         } 
        break; 
        case 38: 
        { 
          found = 0; 
          $("li").each(function(){ 
          if($(this).attr("class") == "selected") 
           found = 1; 
          }); 
          if(found == 1) 
          { 
          var sel = $("li[class='selected']"); 
          sel.prev().addClass("selected"); 
          sel.removeClass("selected"); 
          } 
          else 
          $("li:last").addClass("selected"); 
        } 
        break; 
        case 13: 
         $locKeyword.closest('.form-group').find('.suggest-list').fadeOut() 
         $locKeyword.val($("li[class='selected'] a").text()); 
        break; 
        } 
       } 
      }else{ 
       $(".suggest-list").fadeOut("slow"); 
      } 
     }); 
    }); 
} 

Ajax響應正常工作。我想創建一個函數中的所有表單組。 Ajax打印列表並通過單擊任何列表項值將其插入到文本框上。 我怎麼了？

Answer 1

問題是，ajax回調中的上下文（this）引用請求而不是DOM節點。

$(".locKeyword").keyup(function(event) { 
    // Make temp variable that contains the context: 
    var $locKeyword = $(this); 
    $.ajax({ 
      success : function(msg){ 
      if(msg != 0){ 
       // Refer to the variable here instead of $(this) 
       $locKeyword.closest('.form-group').find('.suggest-list').fadeIn().html(msg); 
      } 
      } 
    }); 
});