Javascript JQuery-筛选以键入文本开头的标签_Javascript_Jquery_Html

Javascript JQuery-筛选以键入文本开头的标签

javascript jquery html

Javascript JQuery-筛选以键入文本开头的标签,javascript,jquery,html,Javascript,Jquery,Html,我有这个城市列表（复选框和标签）和一个输入字段： <input class="search-filter" type="text"/> <form autocomplete="off" id="city-search-form" name="city-search-form" action="" method=""> <div id="list" class="multiselect"> <input id="city-id-1" cl

我有这个城市列表（复选框和标签）和一个输入字段：

<input class="search-filter" type="text"/>
<form autocomplete="off" id="city-search-form" name="city-search-form" action="" method="">
   <div id="list" class="multiselect">
      <input id="city-id-1" class="css-checkbox" type="checkbox" />
      <label for="city-id-1" name="" class="css-label">abc</label>

      <input id="city-id-2" class="css-checkbox" type="checkbox" />
      <label for="city-id-2" name="" class="css-label">bce</label>

      <input id="city-id-3" class="css-checkbox" type="checkbox" />
      <label for="city-id-3" name="" class="css-label">cde</label>

      <input id="city-id-4" class="css-checkbox" type="checkbox" />
      <label for="city-id-4" name="" class="css-label">rgp</label>
   </div>
</form>

您可以使用

：contains（）

选择器进行筛选：

var input = $('.search-filter');
input.change( function () {
        var filter = input.val();
        if(filter.length == 0) { // show all if filter is empty
           $('.css-label').each(function() {
             $(this).show();   
             $(this).prev().show();
           });
           return;
        }

        // hide all labels with checkboxes
         $('.css-label').each(function() {
             $(this).hide();   
             $(this).prev().hide();
         }); 

        // show only matched
        $('.css-label:contains("'+filter+'")').each(function() {
            $(this).show();   
            $(this).prev().show();
        });
}).keyup(function() {
    $(this).change();    
});

试试看

function listFilter(list, input) {
    var $lbs = list.find('.css-label');

    function filter(){
        var regex = new RegExp('\\b' + this.value);
        var $els = $lbs.filter(function(){
            return regex.test($(this).text());
        });
        $lbs.not($els).hide().prev().hide();
        $els.show().prev().show();
    };

    input.keyup(filter).change(filter)
}

jQuery(function($){
    listFilter($('#list'), $('.search-filter'))
})

演示：

我在下面有一个代码来获取标签名称

<!DOCTYPE html>
<html>
<head>

<SCRIPT src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</SCRIPT>

<SCRIPT>
$(document).ready(function(){

alert($(".css-label").text());
});
</SCRIPT>

</head>
<body>
<div id="list" class="multiselect">
      <input id="city-id-1" class="css-checkbox" type="checkbox" />
      <label for="city-id-1" name="" class="css-label">abc</label>
</div>
</body>
</html>


$（文档）.ready（函数（）{
警报（$（“.css标签”）.text（）；
});
abc

希望这能帮助你

太晚了，不能被认为是正确的，但在我的工作遇到阻碍之前，我正在进行一次尝试。我想我还是把它寄出去吧

它不区分大小写，支持多个单词（多亏了Arun p Johny）

$（'.search filter'）.keyup（函数（e）{
var text=$（this.val（）；
var$elems=$（'.css标签，.css复选框'）；
如果（text.length<1）{
$elems.show（）；
}
否则{
$elems.hide（）；
var sel=$（'label'）。过滤器（函数（）{
返回$（this.text（）.match（“\\b”，“i”+文本）
}).attr（“for”）；
$（'#'+sel+'，[for='+sel+']'）。show（）；
}
});

您的代码中有多个错误。例如，$.search（）不是一个函数。$。filter（）的工作方式与您尝试使用它的方式不同。现在还不清楚你想要实现什么。你有这些城市复选框。他们应该对搜索过滤器字段做什么？除非你能更好地解释你想做什么，否则你不会得到一个像样的答案。谢谢你的回答。我已经有了这个包含的解决方案，但我只需要过滤以开头的标签，而不包含键入的文本。谢谢你的回答，这非常有效。如何将其改进为不区分大小写？很抱歉要求提供更多信息，但是如果标签有两个单词，它是否可以搜索第二个单词的开头是否与输入匹配？@user2406735您可以检查第一个或第二个。。。查看更新。。。在正则表达式中使用

\\b

而不是

<!DOCTYPE html>
<html>
<head>

<SCRIPT src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</SCRIPT>

<SCRIPT>
$(document).ready(function(){

alert($(".css-label").text());
});
</SCRIPT>

</head>
<body>
<div id="list" class="multiselect">
      <input id="city-id-1" class="css-checkbox" type="checkbox" />
      <label for="city-id-1" name="" class="css-label">abc</label>
</div>
</body>
</html>

$('.search-filter').keyup(function (e) {
    var text = $(this).val();
    var $elems = $('.css-label, .css-checkbox');

    if (text.length < 1) {
      $elems.show();
    }
    else{
        $elems.hide();    
        var sel = $('label').filter(function () {
           return $(this).text().match("\\b", "i" + text)
        }).attr('for');

        $('#'+sel + ',[for=' + sel + ']').show();                             
    }
});