如何使用 <a> 自动完成 <li>

Question

我生成了一个列表，其中包含层次结构中的链接。我正在尝试制作一个 form/input 让人们输入单词并使用自动完成获取列表（在层次结构中）。自动完成结果是链接。任何帮助都会很棒。谢谢

像这样

<ul>
 <li>
  <a href="#">1</a>
    <ul>
      <li><a href="#">1.1</a></li>
      <li><a href="#">1.2</a></li>
    </ul>
 </li>
 <li>
  <a href="#">1</a>
    <ul>
      <li><a href="#">1.1</a></li>
      <li><a href="#">1.2</a></li>
    </ul>
 </li>
</ul>

Answer 1

使用 JQuery 选择器和 map 函数收集数组中的自动完成字符串

$(function() {
  var availableTags = $('ul > li > a').map(function() {
    return this.href;
  }).toArray();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<label>Items autocomplete</label>
<input id="tags" type="text" style="width: 200px;">&nbsp;&nbsp;&nbsp;
<span id="results_count"></span>

<p>
  <ul>
    <li>
      <a href="aaaa">1</a>
      <ul>
        <li><a href="aabb">1.1</a>
        </li>
        <li><a href="aacc">1.2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="aabb">1</a>
      <ul>
        <li><a href="bbcc">1.1</a>
        </li>
        <li><a href="aabc">1.2</a>
        </li>
      </ul>
    </li>
  </ul>

编辑：自动完成使用 <li> 的

中的文本的第二个版本

$(function() {
  var availableTags = $('ul > li > a').map(function() {
    return $(this).text();
  }).toArray();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<label>Items autocomplete</label>
<input id="tags" type="text" style="width: 200px;">&nbsp;&nbsp;&nbsp;
<span id="results_count"></span>

<p>
  <ul>
    <li>
      <a href="aaaa">xxxx</a>
      <ul>
        <li><a href="aabb">xxyy</a>
        </li>
        <li><a href="aacc">xxzz</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="aabb">xxyy</a>
      <ul>
        <li><a href="bbcc">yyzz</a>
        </li>
        <li><a href="aabc">xxyz</a>
        </li>
      </ul>
    </li>
  </ul>

Jsfiddle

Answer 2

查看html5中的数据列表和列表 datalist

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Answer 3

$(function() {
  var availableTags = $('ul > li > a').map(function() {
  console.log($(this));
    return {
    label: $(this).text(), 
    value: $(this).attr('href')
    };  
  }).toArray();
  $("#tags").autocomplete({
    source: availableTags,
    select: function (event, target) {
      var link = target.item.value;
      console.log(link);
        location.href = link;
    }
  });

});

如何使用 <a> 自动完成 <li>

How to autocomplete a <li> with <a>

html-lists

jquery-autocomplete