0

私は Knockout.js を使用しており、ユーザーが検索ボックスに入力を開始したときに表示される項目のドロップダウン リストを持っています (ライブ フィルタリング)。現在、ユーザーはリストを矢印で移動し、Enter キーを押して検索ボックスにデータを入力できます。

私の個人サイトのサンドボックスにライブバージョンがあります。

ただし、ユーザーがリストをスクロールしてアイテムをクリックできるようにしたいと考えています。Knockout.js がそれらを動的に追加するため、DOM 内のこれらのリスト項目の場所を完全に把握できません。

問題となっているコードの特定の部分は次のとおりです。

<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

thisクリック ハンドラーにはモデル データがあります。Knockout はイベント オブジェクトを 2 番目のパラメーターとして提供し、次を使用できますevent.target。

click: function(data,event){ $('#search').text(($(event.target).val());}
于 2013-01-02T20:50:28.137 に答える
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>

body の終了タグの前に以下を追加します。

<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 に答える