Question

我需要一个搜索框或自动填充文本框来搜索列表中的指定值使用JQUERY或JAVASCRIPT。

例如：默认情况下，列表中的所有值都显示在文本框下。

当我在文本框中输入“a”时，显示从“a”开始的单词。

<input id="tags" />
<div id="xxx">
<ul id="autocompletes1">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>
<li><a href="index.html">Cadillac</a></li>
<li><a href="index.html">Chrysler</a></li>
<li><a href="index.html">Dodge</a></li>
<li><a href="index.html">Ferrari</a></li>
</ul>
</div>

Answer 1

使用此代码：

$(function() {
    var availableTags = [];
    $('#autocompletes1 li').each(function(){
        availableTags.push($(this).text());
    });


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

FIDDLE DEMO

注意：必须使用jquery ui

Answer 2

此代码适用于您的UL列表，但您最好使用javascript插件...

$('#tags').on('keyup',function(e){
  // cache all the tag elements in an array
  var tagElems = $('#autocompletes1').children();

  // hide all tags
  $(tagElems).hide();


  for(var i = 0; i < tagElems.length; i++){ // loop through all tagElements
    var tag = $(tagElems).eq(i);

    if(($(tag).text().toLowerCase()).indexOf($(this).val().toLowerCase()) === 0){
      // if element's text value starts with the hint show that tag element
      $(tag).show();
    }
  }
});

没有标签选择逻辑的

Working Example ...

Example with tag selection logic

Answer 3

var sources = [];
$('span').each(function(i,ele){
  sources.push({'label': $(ele).text(), 'value' : i});
});
$( "#tags" ).autocomplete({
    source: sources
});

<强> Untidy JSFIDDLE

用于搜索UL列表的搜索框或自动填充文本框

3 个答案: