jQuery UI自动完成自定义html
问题描述:
我使用jQuery UI autocomplete作为自定义html下拉列表。要呈现下拉列表,我必须使用hack。这个黑客被调用,因为JavaScript被加载(我不想)。我在另一个文件中有这个代码,并不总是需要使用自动完成方法。jQuery UI自动完成自定义html
这里是我的代码:
查看:
<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
属性来确定
答
简单地套用autocompleter:
if($("#project").length) {
$("#project").autocomplete({...
}
如果你想有一个以上的autocompleter,那么你将需要另一个选择器,因为重复ID导致只有第一个工作的问题。例如:
if($(".project").length) {
$(".project").autocomplete({...
}
根据specification,单个页面不应包含任何重复ID。
甜美,这解决了这两个问题。 – 2011-01-29 20:06:17