JQueryUI 자동 완성 항목에 대한 링크 추가

Question

사용자가 검색 상자에 입력을 시작하면 추천 페이지는 해당 나마와 일치하는 모든 모음의 최신 항목과 다른 데이터를 반환합니다.

해당 항목 (이미지에 표시)과 "이 컬렉션의 모든 항목보기"링크를 표시하고 싶습니다.

나는 (대부분의) 할 수있는 다음 코드 :

$('#search').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: suggesturl, 
      dataType: 'json', 
      data: request, 
      success: function (data) { 
       response(data.map(function (value) { 
        return { 
         'label': '<img src="' + value.thumbsmall + '" />' + value.name + '<a href="/">More items from this collection...</a>', 
         'value': value.fullname 
        }; 
       })); 
      } 
     }); 
    }, 
    minLength: 3 
}) 

문제는 링크가 그것을 클릭 년대 상자에 나타납니다 있지만 무시하고 기본 select 조치가 도착한다는 것입니다

실행 (해당 항목의 value이 텍스트 상자에 입력 됨).

Answer 1

몇 가지 옵션이있는 것 같습니다. 먼저, 자동 완성 이니셜 라이저에서 선택 옵션을 사용하여 자신 만의 선택 작업을 지정할 수 있습니다.

$(selector).autocomplete({ 
    source: ... , 
    select: function(value, data){ 
      if (typeof data == "undefined") { 
       emitMessage('You selected: ' + value + "<br/>"); 
      } else { 
       emitMessage('You selected: ' + data.item.value + "<br/>"); 
      } 
    } 
}); 

는이 충분하지 않은 경우, 어떤 이유로, 당신은 자동 완성 목록에 대한 자신 만의 콘텐츠를 렌더링 할 수있는, 당신이 필요로하는 그런 식으로 많은 컨트롤을 얻는다.
목록의 각 항목을 렌더링하기 위해 autocomplete 호출을 호출하는 _renderItem fn을 원숭이 패치하면됩니다. 방법은 this answer을 확인하십시오. v1.8rc3에서 작동합니다.

_renderItem에서 클릭 가능 문자 인 <span>을 렌더링하고 원하는 논리를 click 이벤트에 첨부 할 수 있습니다.

해당 경로로 이동하면 기본 클릭 동작을 해제해야 할 수 있습니다. autocomplete는 click 이벤트를 제공하는 요소에 <a>을 사용한다고 생각합니다. 이 경우 해당 클릭 핸들러를 설정 해제해야합니다.