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個autocompletes時，只有第一個autocompletes工作。如果#project存在，這可以通過檢查該選擇形成的jQuery對象的length屬性來確定

Answer 1

簡單地套用autocompleter：

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

如果你想有一個以上的autocompleter，那麼你將需要另一個選擇器，因爲重複ID導致只有第一個工作的問題。例如：

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

根據specification，單個頁面不應包含任何重複ID。