jQuery UIのオートコンプリートカスタムHTML

Question

jQuery UI autocompleteを使用して、カスタムHTMLドロップダウンリストを作成しています。ドロップダウンリストをレンダリングするには、hackを使用する必要があります。このハックはjavascriptがロードされるときに呼ばれます（私は望みません）。このコードは別のファイルにありますが、必ずしもオートコンプリートメソッドを使用する必要はありません。

ビュー：

<input id="project"/> 
<div id="tmp" style="display: none;"></div> 

<script type="text/html" id="templateHolder">  
    <a> 
    {$T.value} 
    <br /> 
    {$T.label} 
    </a> 
</script> 

Script.js

$(function() {  

    var projects = [ 
     { 
      value: "jquery", 
      label: "jQuery" 
     }, 
     { 
      value: "jquery-ui", 
      label: "jQuery UI" 
     } 
     ]; 

    $("#project").autocomplete({ 
    minLength: 0, 
    source: projects, 
    focus: function (event, ui) { 
     $("#project").val(ui.item.label); 
     return false; 
    }, 
    select: function (event, ui) { 
     $("#project").val(ui.item.label); 

     return false; 
    } 
    }).data("autocomplete")._renderItem = function (ul, item) { 
     var tmp = $("<div>").setTemplate($("#templateHolder").html()); 
     tmp.processTemplate(item); 
     $("<li></li>").data("item.autocomplete", item) 
         .append($(tmp).html()) 
         .appendTo(ul); 
     return; 
    }; 
}); 

.data('autocomplete')セクションではハックです

は、ここに私のコードです。オートコンプリートがない場合（#projectが見つからない場合）、これを回避する方法はありますか？javascriptエラーは発生しませんか？

：2つのオートコンプリートがページにある場合、最初のものだけが機能します。

Answer 1

#projectが存在する場合は、単にそのセレクタによって形成されたjQueryオブジェクトのlengthプロパティをチェックすることによって決定することができる、自動入力補完を適用する：あなたは、その後、複数の自動入力補完を持ってしようとしている場合は

if($("#project").length) { 
    $("#project").autocomplete({... 
} 

を重複したIDが最初のものだけの問題を引き起こしているので、別のセレクターが必要になります。たとえば、

if($(".project").length) { 
    $(".project").autocomplete({... 
} 

specificationごとに1つのページに重複IDを含めることはできません。