Question

嗨，我的朋友，我想创建搜索框，我想当任何人输入任何单词开始搜索和控制台结果。

这是我的代码：

<input type="text" id="search"> //search input
<ul id="all">
   <li><span>Andro</span></li>
   <li><span>andre</span></li>
   <li><span>Marcos</span></li>
   <li><span>mamaaaaa</span></li>
   <li><span>louis</span></li>
</ul>

的jQuery

    var $all = $('#all');
    $('#search').on('keyup', function() {
        $all.find('li').hide();
        //I want check span value with enter any key
        //(point: span value should to be lowerCase)
     });

请指导我如何使用lowerCase spans值并检查lowerCase输入任何单词

Answer 1

尝试

jQuery(function($){
    var $lis = $('#all li');
    $('#search').on('keyup', function() {
        var regex = new RegExp(this.value, 'i');

        //hide all li elements
        $lis.hide();

        //now filter those li elements which is having the searched text and show them
        $lis.filter(function(){
            return regex.test($(this).find('.name').text());
        }).show();
    });
})

演示：Fiddle

Answer 2

请参阅此demo

var $all = $('#all');
$('#search').on('keyup', function() {
    var txt = $(this).val().toLowerCase();
    $("#all li").each(function() {
        var span_value = $(this).find("span").text().toLowerCase();
        if (span_value.indexOf(txt) == -1) {
            $(this).hide();    
        } else {
            $(this).show();    
        }
    });
});

Answer 3

这是非常基本的，但应该这样做！

var $all = $('#all');
var $search = $('#search').val().toLowerCase();

$('#search').on('keyup', function() {
    $all.find('li').hide().each(function() {
        if ($(this).text().toLowerCase().indexOf($search) != -1)
            $(this).show();
    });
 });

如何检查在span值中键入任何单词

3 个答案: