Question

我正在尝试为jquery编写一个简单的自动完成插件（用于学习目的）。如果你在JS运行之后查看DOM，那么在输入字段之后会有div，但只有第二个在其中有ul。为什么？它应该在两个输入上都相同，不应该吗？

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对象）来制作一个插件。见下文，

DEMO： http://jsbin.com/avomez/3/

<强>原因：

$('input.city')返回一个元素数组，你应该迭代单个元素，以确保你没有弄乱它。你原来的问题就是一个很好的例子。
返回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();
});

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

3 个答案: