[jQuery] Re: Dynamically Filter List

2008-05-09 Thread Mark 

Ahh.. this is a much better implementation!
Thank you so much!

Mark

On May 5, 2:22 am, Wizzud [EMAIL PROTECTED] wrote:
 Depends what you want the list to finally contain (as opposed to being
 visible, that is).
 Here's an alternative...

 $(document).ready(function() {
   var arr = ['C+
 +','D','HTML','CSS','C#','PHP','Python','XML','JavaScript','Photoshop']
 , alc = []
 , list = $('#list');
   $.each(arr, function(i,v){
   list.append('li'+v+'/li');
   alc[i] = v.toLowerCase();
 });
   list = $('li', list);
   $('#filter').keyup(function(){
   var v = this.value ? this.value.toLowerCase() : 0;
   list.each(function(i){
   $(this)[v  alc[i].indexOf(v) == -1 ? 'hide' : 'show']();
 });
 });

 });

 This doesn't change the list contents, simply hides those elements not
 relevant to the value of the filter input box. It also stores the
 lowercase options up front, and stores the object of all the list
 elements so that the keyup handler doesn't have to go find them each
 time it runs.

 Mark wrote:
  Hi... so I'm new to jQuery.  I'm using it to dynamically filter a
  list... I'm wondering if this is the best/most efficient method to go
  about doing it:

  html
  head
  titlejquery test/title
  script type=text/javascript src=js/jquery-1.2.3.min.js/
  script
  script type=text/javascript
  $(document).ready(function() {
  var arr = ['C+
  +','D','HTML','CSS','C#','PHP','Python','XML','JavaScript','Photoshop'];
  for(i=0; iarr.length; ++i) {
  $('#list').append('li'+arr[i]+'/li');
  }
  $('[EMAIL PROTECTED]').keyup(function() {
  $('#list').empty();
  for(i=0; iarr.length; ++i) {
  if($
  ('[EMAIL PROTECTED]').attr('value')==undefined||
  arr[i].toLowerCase().indexOf($
  ('[EMAIL PROTECTED]').attr('value').toLowerCase())!=-1)
  {
  $('#list').append('li'+arr[i]
  +'/li');
  }
  }
  });
  });
  /script
  /head
  body

  ul id=list/ul
  input name='filter' id=filter/

  /body
  /html

  See it in action:http://mechaflora.com/programming/filter

  Any suggestions on how I can do this better would be appreciated :) Or
  feel free to use the code for your own purposes if you think it's good.

[jQuery] Re: Dynamically Filter List

2008-05-05 Thread Wizzud 

Depends what you want the list to finally contain (as opposed to being
visible, that is).
Here's an alternative...

$(document).ready(function() {
  var arr = ['C+
+','D','HTML','CSS','C#','PHP','Python','XML','JavaScript','Photoshop']
, alc = []
, list = $('#list');
  $.each(arr, function(i,v){
  list.append('li'+v+'/li');
  alc[i] = v.toLowerCase();
});
  list = $('li', list);
  $('#filter').keyup(function(){
  var v = this.value ? this.value.toLowerCase() : 0;
  list.each(function(i){
  $(this)[v  alc[i].indexOf(v) == -1 ? 'hide' : 'show']();
});
});
});

This doesn't change the list contents, simply hides those elements not
relevant to the value of the filter input box. It also stores the
lowercase options up front, and stores the object of all the list
elements so that the keyup handler doesn't have to go find them each
time it runs.

Mark wrote:
 Hi... so I'm new to jQuery.  I'm using it to dynamically filter a
 list... I'm wondering if this is the best/most efficient method to go
 about doing it:

 html
 head
 titlejquery test/title
 script type=text/javascript src=js/jquery-1.2.3.min.js/
 script
 script type=text/javascript
 $(document).ready(function() {
 var arr = ['C+
 +','D','HTML','CSS','C#','PHP','Python','XML','JavaScript','Photoshop'];
 for(i=0; iarr.length; ++i) {
 $('#list').append('li'+arr[i]+'/li');
 }
 $('[EMAIL PROTECTED]').keyup(function() {
 $('#list').empty();
 for(i=0; iarr.length; ++i) {
 if($
 ('[EMAIL PROTECTED]').attr('value')==undefined||
 arr[i].toLowerCase().indexOf($
 ('[EMAIL PROTECTED]').attr('value').toLowerCase())!=-1)
 {
 $('#list').append('li'+arr[i]
 +'/li');
 }
 }
 });
 });
 /script
 /head
 body

 ul id=list/ul
 input name='filter' id=filter/

 /body
 /html

 See it in action: http://mechaflora.com/programming/filter

 Any suggestions on how I can do this better would be appreciated :) Or
 feel free to use the code for your own purposes if you think it's good.