javascript - 来自 UL LI 的 JQuery 自动完成（作为源）

Question

这是我的 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>

我想从这里的项目中获得一个自动完成的文本字段。

有人可以帮忙吗？

Answer 1

您要做的是遍历每个跨度（基于您的标记），获取每个跨度的文本，然后将 和 对推入一个key:value数组。labelvalue

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

然后，当您完成构建它时（在 $.each() 之后），我们将简单地使用新数组作为输入源。

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

你可以在这里看到一个快速而肮脏的工作示例