0

I'd like to create searchtoolbar with autosugestion. I don't want to use jquery autocomplete plugin. I have already create script for sending and receiving information from jquery to php and from php to jquery. I have got everything but I want to add a possibility to navigate through hoints' list using arrows. It doesn't work. I think my problem is that jquery can't see dynamically added 'li'. Have you got any ideas?

HTML:

<section id="search_toolbar_input">
                <section class="searchToolbarResultBox">
                    <ul class="searchToolbarResultBoxList" id="thislist">
                    <li><input placeholder="Szukaj..." type="text" id="topper_search" class="searchToolbar" name="topper_search"></li>
                   </ul>
                </section>
             </section>

jQuery:

$("body").on("focus","ul.searchToolbarResultBoxList li",function() {
        var li = $("ul.searchToolbarResultBoxList li");
        var selected;
        $("ul.searchToolbarResultBoxList li").on("keyup",function(e){

            if(e.which == 40)
            {
                $('ul').listview();
                li.eq(1).css('backgroundColor','blue');
                if(selected)
                {
                                    var tmp = selected;
                                    selected.removeClass("selected");
                    selected = tmp.next().addClass("selected");
                }
                else {
                    selected = li.eq(0).addClass("selected");
                }
            }
        });
    });
Maciej Skoczek
  • 35
  • 1
  • 4

1 Answers1

0

Replace $("ul.searchToolbarResultBoxList li").on("keyup", function(e){}) with $("ul.searchToolbarResultBoxList").on("keyup", "li", function(e){})

This binds the event listener to the ul instead of each li. But events from each li will still "bubble up" to the ul, and this will still reference the li.

docs

Farzher
  • 13,934
  • 21
  • 69
  • 100