搜索框或自动完成文本框以搜索UL列表

Example with tag selection logic i need a search box or autocomplete textbox to search a specified value from the listusing JQUERY OR JAVASCRIPT.for example:BY default, all the values in the list are displayed under the text box.when i enter "a" in the text box means, the the word starts from "a" are displayed.<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> 解决方案 This code will work with your UL listing, however you will be better off using javascript plugins...$('#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 without tag selection logic...Example with tag selection logic 这篇关于搜索框或自动完成文本框以搜索UL列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！