jQuery의 자동 완성에 이미지 첨부하기

Question

jQuery의 자동 완성 위젯에 이미지를 추가하는 데 어려움이 있습니다. jquery에 대한 완전한 newcommer이므로 문제의 단순성에 대해 사과드립니다. 함수 belwo 내가 사용하고 있지만 구문 적으로 잘못되었습니다 (""TypeError : $ (...). autocomplete (...). data (...)가 정의되지 않았습니다. "오류가 발생하는 방화 광). 이것이 틀린 곳을 보지 못한다. 나는 심지어 그것의 기능적 측면에 도달 할 수 없다! 어떤 지침이 도움이 될 것입니다. 이 트릭에 대한 몇 가지 질문은 이미 있지만 불행히도 (주로 다른 어떤 것보다 jQuery에 대한 나의 경험이 없기 때문에) 나의 경우에 맞는 답을 조작 할 수 없었다.

아바타의 경로는 "../avatars/user_id/user_id_thumbnail.jpeg"이며 user_id = 정수입니다. 착오 질문 검토 통해

$(function(){ 
    $("#main_search").autocomplete({ 
    minLength: 2, 
    source:'../ajax/search.php', 
    minLength:1 
    }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     var pic_path = '<img src="../avatars/' + item.value + '/' + item.value + '_thumbnail.jpeg">' ; 
     return $("<li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + pic_path + item.label + "</a>") 
     .appendTo(ul); 
    }; 
    }); 

Answer 1

OK 그래서, 그것은 .. 따라서 .... 자동 완성 "UI"를 추가하는 것과 같이 간단

$(function(){ 
    $("#main_search").autocomplete({ 
    minLength: 2, 
    source:'../ajax/search.php', 
    minLength:1 
    }) 
    .data("ui-autocomplete")._renderItem = function(ul, item) { 
     var pic_path = '<img src="../avatars/' + item.id + '/' + item.id+ '_thumbnail.jpeg">' ; 
     console.log(pic_path); 
     return $("<li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + pic_path + item.label + "</a>") 
     .appendTo(ul); 
    }; 
});