javascript - 如何将 HTML 无序列表转换为 jQuery 自动完成？

Question

我在页面上有一个很长的无序列表。看起来像这样

<ul>
  <li>
    <a href="http://www.google.com">
      Google
    </a>
  </li>
  <li>
    <a href="http://www.yahoo.com">
      Yahoo
    </a>
  </li>
</ul>

与其显示链接列表，我更愿意将其显示为 jQuery 自动完成，其中键入“Ya”将显示单词“Yahoo”，单击时(或按“Enter”后)将带您到它的 href .

有什么方法可以获取这个动态变化列表的内容并将其显示为自动完成吗？

Answer 1

假设您使用的是 jQuery UI ,

第 1 步 - 为自动完成添加文本输入:

<input type="text" id="search" />

第 2 步 - 将您的 DOM 转换为链接列表:

var items = [];

$('ul li a').each(function () {
    items.push({ 
        value: $(this).attr('href'),
        label: $(this).text()
    });
});

$('ul').remove();

第 3 步 - 打开自动完成:

$("#search").autocomplete({
    source: items,
    select: function (event, ui) { 
        window.location.href = ui.item.value;
    }
});