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。