0

我需要一个搜索框或自动完成文本框来使用 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>
4

3 回答 3

1

此代码适用于您的 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

于 2013-08-27T11:55:09.993 回答
0

使用此代码:

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


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

小提琴演示

注意:必须使用jquery ui

于 2013-08-27T11:21:43.800 回答
-1
var sources = [];
$('span').each(function(i,ele){
  sources.push({'label': $(ele).text(), 'value' : i});
});
$( "#tags" ).autocomplete({
    source: sources
});

凌乱的 JSFIDDLE

于 2013-08-27T11:18:53.580 回答