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;
    }
});

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

1 个答案: