Question

我正在尝试创建一个2列自动完成功能。我认为这段代码应该是正确的，但我不断收到错误Uncaught TypeError: object is not a function，我不知道为什么。

任何人都可以看到为什么我收到此错误？ Here is my fiddle - 要重现错误，请在以mo开头的文本字段中输入至少两个字符。

PS。 jsFiddle中有一个错误。如果您在第一次保存后单击“更新”，则会禁用403。希望他们尽快解决这个问题。

更新
所以我做了一些调试。从jquery.min.js切换到jquery.js表示jQuery实际上在each上失败了：

TypeError：obj未定义
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/

为什么我的jQuery小部件返回＆＃39;对象不是函数＆＃39;？

1 个答案: