jQuery UI autocomplete custom html
<p>I'm using the jQuery UI <a href="http://jqueryui.com/demos/autocomplete/#custom-data" rel="nofollow">autocomplete</a> for a custom html drop down list. To render the drop down list, I have to use a <a href="http://forum.jquery.com/topic/using-html-in-autocomplete" rel="nofollow">hack</a>. 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.</p>

<p>Here is my code:</p>

<p><strong>View</strong>:</p>

<pre><code>&lt;input id="project"/&gt;
&lt;div id="tmp" style="display: none;"&gt;&lt;/div&gt;

&lt;script type="text/html" id="templateHolder"&gt;    
    &lt;a&gt;
    {$T.value}
    &lt;br /&gt;
    {$T.label}
    &lt;/a&gt;
&lt;/script&gt;
</code></pre>

<p><strong>Script.js</strong></p>

<pre><code>$(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 = $("&lt;div&gt;").setTemplate($("#templateHolder").html());
        tmp.processTemplate(item);
        $("&lt;li&gt;&lt;/li&gt;").data("item.autocomplete", item)
                      .append($(tmp).html())
                      .appendTo(ul);
        return;
    };
});
</code></pre>

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

<p><strong>Also</strong>: When 2 autocompletes are on the page, only the first one works.</p>
