在自动完成与jQuery的动态添加元素 [英] AutoComplete in jQuery with dynamically added elements

问题描述

我的要求是，以显示几个选项，当用户输入可能被动态添加过多输入字段之一某些字符（至少3）。

我不能在页面加载时开始加载数据，因为数据是巨大的。有一个Ajax调用来获取过滤后的数据。

我所得到的问题是预期的标识符错误的网页加载的线＃2。因此，你能告诉什么是错的低于code。

  $（文件）。在（'keydown.autocomplete'，'input.searchInput'，函数（）{
            来源：功能（请求，响应）{// 2号线
            变种的id = this.element [0] .ID;

            变种VAL = $（＃+ id）的.VAL（）;
            $阿贾克斯（{
                    输入：'获取'，
                    网址：'？getNames.html名='+ VAL，
                    成功：功能（数据）{
                        VAR ID = $（本）.attr（'身份证'）;
                        $（本）.removeClass（UI-自动完成装'）;
                        响应（数据）;
                    }，错误：功能（数据）{
                          $（'＃'+ id）的.removeClass（UI-自动完成装'）;
                    }
                  }）;
              }，
                的minLength：3
            }）;
 

解决方案

如何使用另一种方法：当你创建输入初始化自动完成：

$（函数（）{   //设置每个自动完成   VAR autocompleteOptions = {     的minLength：3，     来源：功能（请求，响应）{       $阿贾克斯（{         键入：GET，         网址：getNames.html         数据：{名称：request.term}，         成功：功能（数据）{           响应（数据）;         }       }）;     }   };   //动态创建一个输入和初始化自动完成就可以了   功能addInput（）{     变量$输入= $（＆LT;输入＆gt;中，{       名称：搜索，       类：searchInput       MAXLENGTH：20     }）;     $输入       .appendTo（形式＃myForm会）       。焦点（）       .autocomplete（autocompleteOptions）;   };   //初始化自动完成的第一个输入   $（input.searchInput）自动完成（autocompleteOptions）;   $（＃输入Add按钮）点击（addInput）。 }）;

＆LT;形式ID =myForm的NAME =myForm的方法=邮报＆GT;   ＆LT;输入ID =Add按钮类型=按钮值=增加输入/＆GT;   ＆LT;输入名称=搜索级=searchInput最大长度=20/＆GT; ＆LT; /形式GT;

的jsfiddle与AJAX

My requirement is to show few options when user input some characters (minimum 3) in one of input field which might be added dynamically too.

I can not load data at page loading at beginning because data is huge. There is an ajax call to get that filtered data.

The issue what I am getting is Expected identifier error on page loading at line# 2. So, could you please tell what is wrong with below code.

$(document).on('keydown.autocomplete', 'input.searchInput', function() {                
            source: function (request, response) { // Line # 2
            var id = this.element[0].id;

            var val = $("#"+id).val();             
            $.ajax({                     
                    type : 'Get',
                    url: 'getNames.html?name=' + val,
                    success: function(data) {
                        var id = $(this).attr('id');
                        $(this).removeClass('ui-autocomplete-loading'); 
                        response(data);
                    },error: function(data) {
                          $('#'+id).removeClass('ui-autocomplete-loading');  
                    }
                  });
              },
                minLength: 3
            });

解决方案

How about using another approach: initialize the autocomplete when you create the input:

$(function() {

  // settings for each autocomplete
  var autocompleteOptions = {
    minLength: 3,
    source: function(request, response) {
      $.ajax({
        type: "GET",
        url: "getNames.html",
        data: { name: request.term },
        success: function(data) {
          response(data);
        }
      });
    }
  };

  // dynamically create an input and initialize autocomplete on it
  function addInput() {
    var $input = $("<input>", {
      name: "search",
      "class": "searchInput",
      maxlength: "20"
    });
    $input
      .appendTo("form#myForm")
      .focus()
      .autocomplete(autocompleteOptions);
  };

  // initialize autocomplete on first input
  $("input.searchInput").autocomplete(autocompleteOptions);
  $("input#addButton").click(addInput);
});

<form id="myForm" name="myForm" method="post">
  <input id="addButton" type="button" value="Add an input" />
  <input name="search" class="searchInput" maxlength="20" />
</form>

jsFiddle with AJAX

这篇关于在自动完成与jQuery的动态添加元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！