Question

I have generated a list with links inside in hierarchy. I am trying to make a form/input to let people type in words and it fetch the list(in hierarchy) with autocomplete. The autocomplete results are links. Any help would be great. Thanks

Something like this

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

收集数组中的自动完成字符串

＆＃13;

$(function() {
  var availableTags = $('ul > li > a').map(function() {
    return this.href;
  }).toArray();

  $("#tags").autocomplete({
    source: availableTags
  });
});

＆＃13;

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

＆＃13;

编辑：第二个版本，其中自动填充功能使用<li>中的文字

＆＃13;

$(function() {
  var availableTags = $('ul > li > a').map(function() {
    return $(this).text();
  }).toArray();

  $("#tags").autocomplete({
    source: availableTags
  });
});

＆＃13;

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

＆＃13;

Jsfiddle

Answer 2

请参阅html5中的datalist和list 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>

3 个答案: