使用元素ID填充jQuery UI自動完成列表

Question

我正在使用jQuery UI創建自動完成搜索欄，

我試圖修改以下內容，以根據頁面上元素的ID名稱填充可用標簽列表，

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

例如在頁面上，我將有一個元素，例如

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

一旦列表中填充了這些元素ID並自動完成了特定ID，我將設置所有其他元素以display: none;

Answer 1

您將需要使用$("...").map將源數組狀對象（在這種情況下，是一個與您的.items選擇器匹配的DOM節點填充的jQuery對象）轉換為可以使用jQueryUI自動完成的數組。 這樣的事情應該起作用：

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

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

假設您使用的是data-id屬性，那么您的標記將如下所示：

<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>

示例： http ： //jsfiddle.net/J5rVP/25/