How to sort lists with text input value?

Question

My HTML is a list as bellow:

<ul class="friend_list">
    <li> 
        <a href="#">Krishna</a>
        <a href="#">Karan</a>
        <a href="#">Ram</a>
        <a href="#">Hari</a>
    </li>
</ul>

<input type="text" name="sort" value="Search" id="sort">

Here when a user enters any string in the input text #sort it should sort the value list according to match. Like if I enter K in the input Krishna and Karan list should show and Hari should hide. And again When I enter H or Hari, the Hari li should display and others should hide.

#sort key up function should filter result as the SQL LIKE Operator does.

Can anyone help me find a solution?

possible duplicate of [jQuery table sort](http://stackoverflow.com/questions/3160277/jquery-table-sort) — cfs, Jul 18 '13 at 12:31
do you want it only with the first letter of the name? or should it be like `letter%` or `%letter%`. And is it a requirement that it is only one letter? — Spokey, Jul 18 '13 at 12:31
This isn't so much of a sort as you're hiding non relevant items. It's a filter. — Rory McCrossan, Jul 18 '13 at 12:32

kevhann80 · Accepted Answer · 2013-07-18T12:52:02.947

Here is an idea:

 $("#sort").keyup(function(){
      var v = $(this).val();
      if(v.length==0)
      {    $("a").show();}
      else
      {
      $("a").each(function(){
          if($(this).text().indexOf(v)==0)
              $(this).show();
          else
              $(this).hide();
      })
      }
  }) ;

http://jsfiddle.net/fqyCM/

Change

if($(this).text().indexOf(v)==0)

to

if($(this).text().indexOf(v)!=-1)

to change from starts with to contains

score 0 · Answer 2 · answered Jul 18 '13 at 12:36

you do not provide any code, I doubt anyone is going to do it for you. Here is a code that might give you what you want : http://codecanyon.net/item/advanced-tables/full_screen_preview/53366?ref=lvraa I'd recommand you use a jQuery plugin for this if you not very experimented with programming.

How to sort lists with text input value?

2 Answers2