jQuery UI autocomplete custom html

Question

I'm using the jQuery UI autocomplete for a custom html drop down list. To render the drop down list, I have to use a hack. This hack gets called as the javascript gets loaded (which I do not want). I have this code in another file, and not always will I need to use the autocomplete method.

Here is my code:

View:

<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;
    };
});

The .data('autocomplete') section is the hack. Is there a way to go around this so when there is no autocomplete (no #project is found), it does not throw a javascript error?

Also: When 2 autocompletes are on the page, only the first one works.

Answer 1

Simply apply the autocompleter if #project exists, which can be determined by checking the length property of the jQuery object formed by that selector:

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

If you are going to have more than one autocompleter, then you will need another selector since duplicate IDs are causing the problem of only the first one working. E.g.:

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

A single page should not contain any duplicate IDs as per the specification.