여러 형식의 jQuery UI에 대한 jQuery의 체인 상단을 참조하는 방법 한 페이지에 자동 완성 기능이 있습니까?

Question

jQuery UI Autocomplete를 사용하고 있습니다.

결과가 형식화되는 여러 원숭이 패치 솔루션이있는 동일한 페이지의 여러 자동 완성 상자에 문제가 있습니다. 현재는 페이지 당 하나의 결과 형식을 허용하는 원래의 renderItem 만 덮어 쓸 수 있습니다.

이 문제를 해결하는 방법은 내가 알 수있는 것처럼 자동 완성 위젯의 가장 큰 미해결 신비 중 하나입니다. 자동 완성 요소의 id를 참조 할 수 있다면 원숭이 패치에 if 문을 추가하여 여러 인스턴스를 만들 수 있다는 생각이 들었습니다. 나에게 보여 보자 포맷 결과

원숭이 패치는 다음과 같습니다

$.ui.autocomplete.prototype._renderItem: function(ul, item) { 
    return CUSTOMISE FORMATTING HERE; 
}; 

나는, 같은 페이지에 지정하면

말 :.

$ ("# 입력 1") 자동 완성();

$ ("# input2"). 자동 완성();

$.ui.autocomplete.prototype._renderMenu: function(ul, items) { 
    var self = this; 
    $.each(items, function(index, item) { 
     if ($$$$CLASS-OR-ID$$$$ == '#input1') { 
      self._renderItemCustom1(ul, item); 
     } 
     else if ($$$$CLASS-OR-ID$$$$ == '#input2') { 
      self._renderItemCustom2(ul, item); 
     } 
     else { 
      self._renderItem(ul, item); 
     } 
    }); 
}; 

이 서식을 여러 구성의 구성을 가능하게한다 :로 변경하여

$.ui.autocomplete.prototype._renderMenu: function(ul, items) { 
    var self = this; 
    $.each(items, function(index, item) { 
     self._renderItem(ul, item); 
    }); 
}; 

: 나는 별도의 기능을 달성하기 위해 노력하고 _RenderMenu 사용하는 아이디어를 가지고있어

자동 완성 결과?

예컨대 _renderMenu 내에서 나열된 구성 x 개의 사용자 정의 _renderItem 기능에 의해 :

는

$.ui.autocomplete.prototype._renderItemCustom1: function(ul, item) { 
    return CUSTOMISE FORMATTING HERE; 
}; 

그래서 제 질문은, 어떻게 클래스 또는 ID ($$$$ CLASS-OR-ID 코드의를 $$$$) 참조 할 수있다 _renderMenu 함수 내의 체인 맨 위에 있습니까?

희망이 있으시면, 도움 주셔서 감사합니다!

Answer 1

좋아요, Karim의 영감 덕분에 해결했습니다. elementID 일 필요가 없다고 결정 했으므로 다음과 같이 각 자동 완성마다 서로 다른 참조/옵션을 지정할 수 있어야합니다. :

$.ui.autocomplete.prototype._renderMenu: function(ul, items) { 
    var self = this; 
    $.each(items, function(index, item) { 
     if (this.options.format == 'format1') { 
      self._renderItemCustom1(ul, item); 
     } 
     else if (this.options.format == 'format2') { 
      self._renderItemCustom2(ul, item); 
     } 
     else { 
      self._renderItem(ul, item); 
     } 
    }); 
}; 

그리고 나는 그렇게만큼 그들은 _renderMenu 내에 지정 될 때처럼 무한 _RenderItem 년대를 지정할 수 있습니다 :

$("#input1").autocomplete({ 
    source: source1, 
    format: format1 /* This is my planted reference */ 
}); 
$("#input1").autocomplete({ 
    source: source2, 
    format: format2 
}); 

RenderMenu이된다

$.ui.autocomplete.prototype._renderItemCustom1: function(ul, item) { 
    return CUSTOM FORMATTING; 
} 

요소 ID를 사용하는 것보다 나을 수도 있습니다. 이는 같은 사용자 정의 _renderItem을 다른 ID로 여러 출력에 사용할 수 있지만 동일한 출력 방법을 사용할 수 있음을 의미합니다.

편집 : 나는 그것을 코딩 _renderMenu을 조금 더 효율적으로하지 부풀게하려면이 새로운 코드는 대신이 _renderItemFORMATNAME를 실행, 각각의 새로운 _renderItem 방법에 대한 _renderMenu를 다시 작성하지 않아도 의미

$.ui.autocomplete.prototype._renderMenu = function(ul, items) { 
    var self = this; 
    if (typeof this.options.format == 'undefined') { 
     $.each(items, function(index, item) { 
      self._renderItem(ul, item); 
     }); 
    } 
    else { 
     var fname = 'self._renderItem' + this.options.format + '(ul, item)'; 
     $.each(items, function(index, item) { 
      eval(fname); 
     }); 
    } 
} 

자동이면

format: FORMATNAME 

이 지정됩니다. 비록 내 원래의 예제에 대한

$.ui.autocomplete.prototype._renderItemCustom1 
becomes: 
$.ui.autocomplete.prototype._renderItemformat1 

Answer 2

이것은 약간 해킹 된 것 같지만 솔직히 다른 것을 생각할 수 없습니다. 즉, 각 데이터 항목에 'controlId'속성을 추가합니다. 우리는 몇 가지 조건을 통해이 속성을 읽고, 그 값을 실행하는 _renderMenu 메소드를 오버라이드 (override) :

$.ui.autocomplete.prototype._renderMenu = function(ul, items) { 
    var self = this; 
    $.each(items, function(index, item) { 
     if (item.controlId == 'foo') { 
      alert('got foo'); 
      self._renderItemCustom1(ul, item); 
     } 
     else if (item.controlId == 'bar') { 
      alert('got bar'); 
      self._renderItemCustom2(ul, item); 
     } 
     else { 
      self._renderItem(ul, item); 
     } 
    }); 
}; 

// each object should have a 'controlId' parameter 
var projects = [ 
    { 
    value: "jquery", 
    label: "jQuery", 
    desc: "the write less, do more, JavaScript library", 
    icon: "jquery_32x32.png", 
    controlId: 'foo'}, // this tells the AC which 
{ 
    value: "jquery-ui", 
    label: "jQuery UI", 
    desc: "the official user interface library for jQuery", 
    icon: "jqueryui_32x32.png", 
    controlId: 'foo'}, 
{ 
    value: "sizzlejs", 
    label: "Sizzle JS", 
    desc: "a pure-JavaScript CSS selector engine", 
    icon: "sizzlejs_32x32.png", 
    controlId: 'foo'} 
]; 

$("#foo").autocomplete({ 
    source: projects 
}); 

은 솔직히 사람이보다 더 예쁜 솔루션을 게시 바랍니다. 어쨌든, here is a demonstration.