Question

我尝试使用jquery通过ajax将自动完成（建议）列表显示到文本框。

这是我的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进程之后，我想在＆＃39; suggest-list＆＃39;上显示ajax响应。请注意，该页面包含许多＆＃39; form-group＆＃39;上课时，我想表明这个＆＃39; form-group＆＃39;输入类型文本框和类为＆＃39; locKeyword＆＃39;。

  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);
             }
          }
   });
});

如何在同一表单组元素中插入内容？

1 个答案: