Question

I’m using jQuery UI to create an autocomplete search bar,

I’m attempting to modify the following to populate the list of available tags based on the ID name of elements on the page,

var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
        ];

For example on the page, I will have an element such as

<div class="items" id="Get milk">Don't forget to get milk on way home from work</div>

Once the list is populated with these element id’s and a particular id is autocompleted I will be setting all other elements to display: none;

Answer 1

You will need to use $("...").map to transform your source array-like object (in this case a jQuery object filled with DOM nodes matching your .items selector) into an array that jQueryUI autocomplete can work with. Something like this should work:

var source = $(".items").map(function () {
    return $(this).data("id");
}).get();

$("#auto").autocomplete({
    source: source        
});

Assuming you’re using a data-id attribute, so your markup would look something like this:

<div class="items" data-id="Get Milk">Get Milk on the way home</div>
<div class="items" data-id="Drop by Phil's">Drop by Phils house</div>
<div class="items" data-id="Grab a Sandwich">Grab a sandwich</div>

Example: http://jsfiddle.net/J5rVP/25/