0

我正在使用 Knockout.js，并且当用户开始在搜索框中输入内容时会出现一个下拉列表（实时过滤）。目前，用户可以在列表中使用箭头并按 Enter 来填充搜索框。

我的个人站点沙箱中有一个实时版本。

但是，我希望用户也能够滚动列表并单击项目。我不太清楚这些列表项在 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>
4

2 回答 2

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>
于 2012-11-14T19:37:08.463 回答
1

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

click: function(data,event){ $('#search').text(($(event.target).val());}
于 2013-01-02T20:50:28.137 回答