Question

我正在使用jQuery UI autocomplete作为自定义html下拉列表。要呈现下拉列表，我必须使用hack。随着javascript被加载（我不想要），这个hack被调用。我在另一个文件中有这个代码，并不总是需要使用自动完成方法。

这是我的代码：

查看：

<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导致只有第一个工作的问题。 E.g：

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

根据specification，单个页面不应包含任何重复的ID。

jQuery UI自动完成自定义html

1 个答案: