实时搜索HTML元素

Question

我想使用JQuery实时搜索所有HTML <a></a>元素。

HTML

 <div id="citysname">
    <?php foreach($get_cities as $place) { ?>
        <a href="<?php echo base_url().'init/place/'.$place->cities; ?>" id="place" class="<?php echo $place->cities; ?>"><?php echo $place->cities; ?></a>
    <?php } ?> 
 </div>

Jquery的

$(document).on("keyup", "#searchcity", function(){
   var city = $(this).val();
   $( "#citysname a" ).each(function() {
   $(this).not('[class^='+ city +']').hide();
   $(this+'[class^='+ city +']').show();
});

我想搜索并突出显示<a>元素，如果它的类匹配，并且如果类不匹配，我想隐藏<a>个元素。

使用show并隐藏元素不会切换。如果匹配则元素显示但是当我擦除它时它是否与所有元素不匹配。

我的代码位于jsfiddle。

Answer 1

嗨，你可以像这样做

＆＃13;

＆＃13;

$(document).ready(function(){ 
$(document).on("keyup", "#searchcity", function(){
     var city = $(this).val();
     $(".active").removeClass("active");
      $('#citysname a[class*='+city+']').addClass('active');
   });
});

＆＃13;

.active{
    background-color:yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchcity">
<div id="citysname">
    <a href="#" id="place" class="kathmandu">Kathmandu</a>
    <a href="#" id="place" class="bhaktapur">bhaktapur</a>
    <a href="#" id="place" class="Narayangarh">Narayangarh</a>
    <a href="#" id="place" class="lalitpur">lalitpur</a>
    <a href="#" id="place" class="something">something</a>
    <a href="#" id="place" class="hello">hello</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这个怎么样：

$(document).on("keyup", "#searchcity", function () {
    var city = $(this).val();
    if (city.trim().length) {
        $("#citysname").find("a").each(function () {
            if ($(this).attr('class').indexOf(city) > -1) 
                $(this).addClass('highlight');
            else $(this).removeClass('highlight');
        });
    } else $("#citysname a").removeClass('highlight');

});

演示：https://jsfiddle.net/erkaner/6qp4s3op/5/

Answer 3

特点：

• 匹配城市的第一个字母，而不是string城市上的任何字母。
• 不区分大小写的匹配
• 精彩匹配
• 如果没有匹配或输入为空，则删除突出显示

＆＃13;

＆＃13;

$(document).ready(function(){  

$(document).on("keyup", "#searchcity", function(){
    var city = $(this).val();

    $( "#citysname a" ).each(function() {
        var classCity = $(this).attr("class")
        var matcher = new RegExp("^"+city, "i");
        if (matcher.test(classCity)) {  
            $(this).show().addClass('highlight');
        }            
    });
            if(!city.trim()){
        $( "#citysname a" ).each(function() {
            $(this).removeClass('highlight');
        });
    }
    
});
});

＆＃13;

.highlight{
background-color:yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchcity">
<div id="citysname">
<a href="#" id="place" class="NewYork">New York</a>
<a href="#" id="place" class="SanFrancisco">San Francisco</a>
<a href="#" id="place" class="Paris">Paris</a>
<a href="#" id="place" class="Palma">Palma</a>
<a href="#" id="place" class="Tokyo">Tokyo</a>
<a href="#" id="place" class="RiodeJaneiro">Rio de Janeiro</a>
</div>

＆＃13;

＆＃13;

＆＃13;

演示

http://jsfiddle.net/tuga/g1dbz3go/3/

Answer 4

$(document).ready(function(){ 

$(document).on("keyup", "#searchcity", function(){
 var city = $(this).val();
 $( "#citysname" ).each(function() {
     $(":not('"+city+"')", this).hide();
  $("."+city, this).show();
});
});
});