使用jquery选择器自动填充kendo框

Question

我的HTML中有多个标签，如下所示。

<li data-code="ABC"
<li data-code="XYZ"
<li data-code="PQR"

我需要将三个值添加到kendo自动完成框中。

<input id='myKendobox'/>

我使用下面的代码来获取列表。

var items = $("li").map(function () { return $(this).attr("data-code"); }).get();

我有两个问题： 如何确保第四个空项目不在“项目”列表中？ 如何填充我的kendo自动完成框中的项目？

Answer 1

你的li物品没有关闭，你意识到了吗？

要填充自动填充，您可以执行以下操作：

给定输入HTML（自动完成）：

<input id='myKendobox'/>

并初始化如下：

var data = [];
var autocomplete = $("#myKendobox").kendoAutoComplete({
    dataSource: data
}).data("kendoAutoComplete");

如果要添加要执行的元素，请执行以下操作：

var items = $("li").map(function () { return $(this).attr("data-code"); }).get();
autocomplete.dataSource.data(items);

如果要限制jQuery选择器找到的<li>元素，可以将它们定义为：

<ul id="AutocompleteOptions">
    <li data-code="ABC"></li>
    <li data-code="XYZ"></li>
    <li data-code="PQR"></li>
</ul>

然后将选择器更改为：

var items = $("li", "#AutocompleteOptions").map(function () { return $(this).attr("data-code"); }).get();

这会将找到的<li>限制为#AutocompleteOptions下的{。}}。

在JSFiddle

中运行的示例