jQuery 위젯이 'object is a function'을 반환하는 이유는 무엇입니까?

Question

2 열 자동 완성을 만들려고합니다. 이론이 코드는 정확해야하지만, 나는 Uncaught TypeError: object is not a function 오류를 계속 그리고 왜 모르겠어요.

누구나 왜이 오류가 발생하는지 알 수 있습니까? Here is my fiddle - 오류를 재현하려면 mo으로 시작하는 텍스트 필드에 2 자 이상 입력하십시오.

PS. jsFiddle에 버그가 있습니다. 처음 저장 한 후 업데이트를 클릭하면 403이 금지됩니다. 바라건대 그들은이 문제를 가능한 빨리 해결할 것입니다.

UPDATE 그래서 좀 디버깅을 수행했습니다. 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()); 
}); 

it 출력

// 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()); 

코드 :

"소스"매개 변수는 입력의 3 개 종류를 받아

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

- 참조 http://api.jqueryui.com/autocomplete/#option-source을 사용하면 제공하는 형식이 적절하지 않음을 알 수 있습니다. 조금 연구를 해본 결과 다음과 같이 작동합니다.

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

다른 모든 것은 확장 메소드 디버깅에 관한 것입니다.

나는 당신의 바이올린 업데이 트했습니다 - 사실 http://jsfiddle.net/PMfb8/2/