Question

I’m using Knockout.js and have a drop down list of items that appears when the user begins typing in a search box (live filtering). Currently, the user can arrow through the list and hit enter to populate the search box.

There is a live version in my personal site sandbox.

However, I want the user to be able to scroll through the list as well and click on items. I can’t quite figure out the location of these list items in the DOM because Knockout.js dynamically adds them in.

Here’s the particular portion of code that is in question:

<div class="hidden" id='dropdown'>
    <ul id='dropdownList'
        data-bind="template: { name:'objects', foreach:obj }, 
                   click: function(){ $('#search').text(($(this).val());}">
    </ul>
</div>

Answer 1

It looks like it is creating list items with the class of listObjItem, So could you do something like this.

$(function(){
   $(document).on('click', '.listObjItem', function(){
       $('#search').val($(this).text());
   });
});

EDIT

To help clarify from comments below. Right now your code looks like this.

<ul id='dropdownList' data-bind="template: { name:'objects', foreach:obj }, 
            click: function(){ 
                $('.listObjItem').on('click', function(){
                        $('#search').val($(this).text())
                        $('#dropdown').hide();
                        $('#search').focus();
                    ;});
                }"></ul>

what I am saying to do is change the code to look like this.

 <ul id='dropdownList' data-bind="template: { name:'objects', foreach:obj }"></ul>

And add the following before the closing body tag.

<script type="text/javascript">
$(function(){
    $(document).on('click', '.listObjItem', function(){
       $('#search').val($(this).text());
       $('#dropdown').hide();
       $('#search').focus();
   });
});
</script>