Question

我正在使用Knockout.js并且有一个下拉列表，列出了当用户开始在搜索框中输入时显示的项目（实时过滤）。目前，用户可以浏览列表并按Enter键以填充搜索框。

我的personal site sandbox中有一个实时版本。

但是，我希望用户也能够滚动列表并单击项目。我无法弄清楚DOM中这些列表项的位置，因为Knockout.js会动态添加它们。

以下是有问题的代码的特定部分：

<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

看起来它正在创建listObjItem类的列表项，所以你能做这样的事情。

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

编辑

帮助澄清下面的评论。现在你的代码看起来像这样。

<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>

我要说的是将代码更改为这样。

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

在结束体标记之前添加以下内容。

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

Answer 2

点击处理程序中的

this是模型数据。 Knockout将事件对象作为第二个参数提供，然后您可以使用event.target：

click: function(data,event){ $('#search').text(($(event.target).val());}

无法从动态<li>项目</li>中选择/获取文本

2 个答案: