javascript - Search through HTML elements in realtime -

i want search through html <a></a> elements in real time jquery.

html

 <div id="citysname">     <?php foreach($get_cities $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(); }); 

i want search , highlight <a> elements if it's class matches and, want hide <a> elements if class not match.

using show , hide element doesn't toggle. if matching elements shows if not matching element hidden when erase it.

my code in jsfiddle.

how this:

$(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');  }); 

demo: https://jsfiddle.net/erkaner/6qp4s3op/5/