来自UL LI的JQuery自动完成（作为源代码）

Question

This is my ul li :

<ul id="red" class="treeview-red">
        <li><span>Item 1</span>
            <ul>
                <li><span>Item 1.0</span>
                    <ul>
                        <li><span>Item 1.0.0</span></li>
                    </ul></li>
                <li><span>Item 1.1</span></li>
                <li><span>Item 1.2</span>
                    <ul>
                        <li><span>Item 1.2.0</span>
                            <ul>
                                <li><span>Item 1.2.0.0</span></li>
                                <li><span>Item 1.2.0.1</span></li>
                                <li><span>Item 1.2.0.2</span></li>
                            </ul></li>
...............
.................. 
</ul>

I want to have a autocomplete textfield from the items present in here.

Can anybody help?

Answer 1

What you want to do is iterate over each span(based on your Markup), grab the text of each, and push into an array the key:value pairs of label and value .

var sources = [];
$('span').each(function(i,ele){
    sources.push({'label': $(ele).text(), 'value' : $(ele).text()});
});

Then when you're done building it, (after the $.each()), we'll simply use the new array as our source for the input.

$('input').autocomplete({
    source: sources
});

You can see a quick and dirty working example here