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>
> > <title>jquery 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; i<arr.length; ++i) {
> > $('#list').append('<li>'+arr[i]+'</li>');
> > }
> > $('[EMAIL PROTECTED]').keyup(function() {
> > $('#list').empty();
> > for(i=0; i<arr.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.
