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?

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
– Spokey, Commented Jul 18, 2013 at 12:31
This isn't so much of a sort as you're hiding non relevant items. It's a filter. — Rory McCrossan
– Rory McCrossan, Commented Jul 18, 2013 at 12:32

kevhann80 · Accepted Answer · 2013-07-18 12:52:02Z

3

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

edited Jul 18, 2013 at 12:52

answered Jul 18, 2013 at 12:39

kevhann80

3112 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JohnWolf · Accepted Answer · 2013-07-18 12:36:37Z

0

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.

answered Jul 18, 2013 at 12:36

JohnWolf

1,18714 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to sort lists with text input value?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related