为什么我的jQuery小部件返回"对象不是函数"？

Question

我试图创建一个2列自动完成。我理论这段代码应该是正确的，但我一直得到错误Uncaught TypeError: object is not a function，我不知道为什么。

有人知道为什么我得到这个错误吗?下面是我的方法——要重现错误，在以mo开头的文本字段中输入至少两个字符。

p。jsFiddle有一个bug。如果你第一次保存后点击更新，你会得到一个403禁止。希望他们能尽快解决这个问题

所以我做了一些调试。从jquery.min.js切换到jquery.js显示，jQuery实际上在each上失败了:

TypeError: obj is undefined
Length = obj.length，

那么通过这样做:

var stores = items.stores;
console.log(stores.toSource());

你会得到一个TypeError: stores is undefined

但是如果你这样做:

$.each( items, function( index, item ) {
  console.log(item.toSource());
});

它将输出

// Stores
({0:{id:"4058", name:"Moods"...}, 1:{id:"4059", name:"Moody"...}, label:(void 0), value:(void 0)})  
// Brands
({0:{id:"4673", name:"Moods"...}, 1:{id:"4674", name:"MOOKS"...}, label:(void 0), value:(void 0)})

更新2
似乎response(data);删除了JSON对象中的命名参数。
如果你这样做:

success: function (data) {
    console.log(data.stores.toSource()); // <-- This works
    response(data); // But after this, it no longer works
}

现在你可以点他的:

console.log(data[0].toSource());

代码:

var data = 
  {"stores":[
      {"id":"4058","name":"Mo-shu","city":"Oslo","fk_countryID":"NO"},
      {"id":"4059","name":"Mood","city":"Oslo","fk_countryID":"NO"}
  ],
  "brands":[
      {"id":"4673","name":"Moods"},
      {"id":"4674","name":"MOOKS"}
  ]
}    

$.widget( "custom.searchAutocomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var self = this;
        ul.addClass('searchAutocomplete');
        ul.append('<li class="stores left"></li>');
        ul.append('<li class="brands left"><li>');
        $.each( items.stores, function( index, item ) {
            self._renderItem( ul.find('.stores' ), item, 'store' );
        });
        $.each( items.brands, function( index, item ) {
            self._renderItem( ul.find('.brands' ), item,'brand' );
        });
    },
    _renderItem: function( li, item, type) {
        var listItem = $('<div />');
        listItem.data('ui-autocomplete-item', item );
        if(type == 'store') {
            listItem.append( "<a>"+ item.name + "<br /><span class='address'>Street name here</span></a>" );
        } else {
            listItem.append('<a>' + item.name + '</a>');
        }
        listItem.appendTo( li ); 
        return listItem;
    }
});
$('#search-box').searchAutocomplete({
  minLength: 2,
  source: data,
  select: function(e, ui){
     $(this).val(ui.item.name);
     return false;
 }
});

Answer 1

"source"参数只接受3种类型的输入-参考http://api.jqueryui.com/autocomplete/#option-source查看您给出的格式是否合适。我做了一些研究，这是有效的:

$('#search-box').searchAutocomplete({
  minLength: 2,
  source: function(request,response)
    {
        response(data);
    }
});

其他的都是关于调试你的扩展方法。

我已经更新了你的小提琴- http://jsfiddle.net/PMfb8/2/