jquery - Jquery 插件在不同的实例上表现不同

Question

我正在尝试为 jquery 编写一个简单的自动完成插件（用于学习目的“）。如果你在 JS 运行后查看 DOM，输入字段后面有 div，但只有 2nd 里面有 ul。为什么？它应该在两个输入上都可以正常工作，不是吗？

http://jsbin.com/avomez/1/edit这是我的代码：

HTML

 <input class="city" type="text" />
 <input class="city" type="text" /> 

JS

$.fn.autocomplete = function(){
    var self = $(this);
    var drpd = $('<div class="dropdown" />');
    var ul = $('<ul class="city" />');

    self.after(drpd);
    drpd.append(ul);



};

$("input.city").autocomplete();

Answer 1

添加此行

$.fn.autocomplete = function(){
    return this.each(function(){  //ADD
    var self = $(this);
    var drpd = $('<div class="dropdown" />');
    var ul = $('<ul class="city" />');
    self.after(drpd);
    drpd.append(ul);
    });                          //ADD
};

Answer 2

您将需要迭代并返回this（jQuery 对象）来制作插件。见下文，

演示：http: //jsbin.com/avomez/3/

原因：

1. 返回一个元素数组，$('input.city')你应该迭代单个元素以确保你没有搞砸它。你原来的问题就是一个很好的例子。
2. 返回 jQuery 对象允许您像链接一样$('input.city').autocomplete().addClass('someclass');

代码：

$.fn.autocomplete = function(){
  return this.each(function () {
    var self = $(this);
    var drpd = $('<div class="dropdown" />');
    var ul = $('<ul class="city" />');

    self.after(drpd);
    drpd.append(ul);
  });    
};

Answer 3

尝试使用change事件来查找正确的输入：

$("input.city").change(function(){
     $(this).autocomplete();
});