Question

我无法找到一个小型搜索引擎解决方案。

<form>
   <input />
</form>
<ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    <li>Enim</li>
 </ul>

我想在输入字段中键入时隐藏列表元素的效果。例如：当您键入＆＃39; m＆＃39;时，那些不包含此字母的列表元素将会消失（li 3和4）。一旦你输入“我”＃39;你只会：nth-child（5）等。

Answer 1

此搜索不区分大小写，input中提供的匹配字母/单词搜索<li>的全长，意思是它显示<li>字母/单词是否在<li>中出现的文本的开头，中间或末尾。

建议：您应该为input提供一个名称或ID，以防止与您在网页上添加的其他input以及ul混淆}。

＆＃13;

$('input').bind('keyup click change',function(){ //Event on input
   search = $(this).val().toLowerCase(); //Turns input val lowercase
   var re = new RegExp(search, 'g');
    
   $('ul li').each(function(){ //Search in all <li>
        $(this).hide(); //Hide all <li>
        target = $(this).text().toLowerCase(); //Tuns <li> text lowercase
        if(target.match(re)){
             $(this).show(); //Show <li> with matching letter/word
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Sit</li>
  <li>Amet</li>
  <li>Enim</li>
</ul>

＆＃13;

Answer 2

试试这个

if(jQuery('input').val() == ''){
    jQuery('ul').hide();
}

Answer 3

嗯，我发现，它正是你想要的：

https://stackoverflow.com/a/1767031/7739055

在duckyflip的回应中，Toni Michel Caubet分享了一个JSFiddle：

Exemple of code

HTML code：

BufferedImage

JQuery代码：

<input type="text" id="filter" placeholder="Filtra por.." />
<ul>
    <li><a>musica</a></li>
    <li><a>musicas</a></li>
    <li><a>tele</a></li>
    <li><a>videos graciosos</a></li>
    <li><a>uib</a></li>
    <li><a>bio</a></li>
    <li><a>tecnología</a></li>
    <li><a>Tonterías</a></li>
    <li><a>Más Tonterías</a></li>
    <li><a>Tonterias sin acento</a></li>
    <li><a>Teta</a></li>
    <li><a>Pis</a></li>
</ul>

Answer 4

在文本框中使用SubReport_1事件，并检查keyup上的搜索字符串循环。

ul li

$("#txtSearch").keyup(function() {
  var search = $(this).val();
  $('ul > li').each(function() {
    var liVal = $(this).text();
    liVal.indexOf(search) != -1? $(this).show(): $(this).hide();;
     
     
  });
});

Answer 5

试试这个，记得在你的脚本中包含jQuery。此搜索区分大小写，

// bind change    
                $('input').bind('keyup click change',function(){
                   var toSearch = $("input#target").val();
                                     console.log('toSearch '+toSearch);
                                     alert(toSearch);
                  // hide all li elements
                   $("li").hide();
                  // loop through all li and search your substring
                   $('li').each(function(){
                       // through your text
                       if($(this).text().includes(toSearch)) {
                           $(this).show();
                       }
                }) 
                });

如果输入dosen＆t; tt包含字符串，则隐藏列表元素

5 个答案: