搜索一个div和缩小选项

Question

我有div里面的一堆城市。当你找不到你正在寻找的城市时，这是令人沮丧的。

因此，我试图添加一个搜索栏，以排除与搜索字符串不匹配的城市。

<form> 
    <div class="form-group"> 
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="quick city search"> 
    </div> 
</form> 
<div id="cities"> 
    <div id="cities"> 
     <a href="http://www.example.com/?city=alingsas" style="font-size: <?php echo mt_rand(5, 40); ?>px">Alingsås</a> 
     <a href="http://www.example.com/?city=borlange" style="font-size: <?php echo mt_rand(5, 40); ?>px">Borlänge</a> 
     <a href="http://www.example.com/?city=boras" style="font-size: <?php echo mt_rand(5, 40); ?>px">Borås</a> 
     <a href="http://www.example.com/?city=eskilstuna" style="font-size: <?php echo mt_rand(5, 40); ?>px">Eskilstuna</a> 
     <a href="http://www.example.com/?city=falun" style="font-size: <?php echo mt_rand(5, 40); ?>px">Falun</a> 
     <a href="http://www.example.com/?city=goteborg" style="font-size: <?php echo mt_rand(5, 40); ?>px">Göteborg</a> 
     <a href="http://www.example.com/?city=gavle" style="font-size: <?php echo mt_rand(5, 40); ?>px">Gävle</a> 
     <a href="http://www.example.com/?city=halmstad" style="font-size: <?php echo mt_rand(5, 40); ?>px">Halmstad</a> 
     <a href="http://www.example.com/?city=helsingborg" style="font-size: <?php echo mt_rand(5, 40); ?>px">Helsingborg</a> 
     <a href="http://www.example.com/?city=hudiksvall" style="font-size: <?php echo mt_rand(5, 40); ?>px">Hudiksvall</a> 
     <a href="http://www.example.com/?city=harnosand" style="font-size: <?php echo mt_rand(5, 40); ?>px">Härnösand</a> 
     <a href="http://www.example.com/?city=jonkoping" style="font-size: <?php echo mt_rand(5, 40); ?>px">Jönköping</a> 
     <a href="http://www.example.com/?city=kalmar" style="font-size: <?php echo mt_rand(5, 40); ?>px">Kalmar</a> 
    </div> 
</div> 

这是在Fiddle的尝试。

这与一个亮点是参考：http://jsfiddle.net/FranWahl/aSjqT/

我的问题是： 如何搜索一个div，并排除不是“搜索”字符串。

Answer 1

在你的提琴做

$("#search").on("keyup", function() { 
 
     var value = $(this).val().toUpperCase(); 
 
     
 
     $("#cities a").each(function(index) {  
 
       $row = $(this);    
 
       var id = $row.text().toUpperCase();   
 
       //All match 
 
       //if (id.indexOf(value) == -1) { 
 
       //For startWith Match 
 
        if (!id.startsWith(value)) { 
 
        $row.hide(); 
 
       } 
 
       else { 
 
        $row.show(); 
 
       } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control" id="search" placeholder="quick city search"> 
 
     </div> 
 
    </form> 
 
    <div> 
 
      <div id="cities"> 
 
       <a href="http://www.example.com/?city=alingsas" style="font-size: <?php echo mt_rand(5, 40); ?>px">Alingsås</a> 
 
       <a href="http://www.example.com/?city=borlange" style="font-size: <?php echo mt_rand(5, 40); ?>px">Borlänge</a> 
 
       <a href="http://www.example.com/?city=boras" style="font-size: <?php echo mt_rand(5, 40); ?>px">Borås</a> 
 
       <a href="http://www.example.com/?city=eskilstuna" style="font-size: <?php echo mt_rand(5, 40); ?>px">Eskilstuna</a> 
 
       <a href="http://www.example.com/?city=falun" style="font-size: <?php echo mt_rand(5, 40); ?>px">Falun</a> 
 
       <a href="http://www.example.com/?city=goteborg" style="font-size: <?php echo mt_rand(5, 40); ?>px">Göteborg</a> 
 
       <a href="http://www.example.com/?city=gavle" style="font-size: <?php echo mt_rand(5, 40); ?>px">Gävle</a> 
 
       <a href="http://www.example.com/?city=halmstad" style="font-size: <?php echo mt_rand(5, 40); ?>px">Halmstad</a> 
 
       <a href="http://www.example.com/?city=helsingborg" style="font-size: <?php echo mt_rand(5, 40); ?>px">Helsingborg</a> 
 
       <a href="http://www.example.com/?city=hudiksvall" style="font-size: <?php echo mt_rand(5, 40); ?>px">Hudiksvall</a> 
 
       <a href="http://www.example.com/?city=harnosand" style="font-size: <?php echo mt_rand(5, 40); ?>px">Härnösand</a> 
 
       <a href="http://www.example.com/?city=jonkoping" style="font-size: <?php echo mt_rand(5, 40); ?>px">Jönköping</a> 
 
       <a href="http://www.example.com/?city=kalmar" style="font-size: <?php echo mt_rand(5, 40); ?>px">Kalmar</a> 
 
    </div>

https://jsfiddle.net/k8rp18qb/2/

Answer 2

这将帮助你很多。

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
    </head> 
    <body> 

    <div data-role="page" id="pageone"> 
     <div data-role="main" class="ui-content"> 
     <form class="ui-filterable"> 
      <input id="myFilter" data-type="search"> 
     </form> 
     <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true"> 
      <li><a href="#">Adele</a></li> 
      <li><a href="#">Agnes</a></li> 
      <li><a href="#">Billy</a></li> 
      <li><a href="#">Bob</a></li> 
      <li><a href="#">Calvin</a></li> 
      <li><a href="#">Christina</a></li> 
      <li><a href="#">Diana</a></li> 
      <li><a href="#">Glen</a></li> 
      <li><a href="#">Ralph</a></li> 
      <li><a href="#">Valarie</a></li> 
     </ul> 
     </div> 
    </div> 

    </body> 
    </html>