Q:

Search a div and narrow down options

I have div with a bunch of cities inside. And it is frustrating when you don't find the city you are looking for.
So I'm trying to add a search bar, to exclude the cities that doesn't match the search string.
<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>

Here is an attempt in a Fiddle.
This one with highlight was the reference: http://jsfiddle.net/FranWahl/aSjqT/
My question is:
How can i search a div, and exclude strings that is not "searched" for.

A:

In your fiddle do

$("#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/

