Javascript：入力フィールドを空にしてEnterを押す

Question

私はノックアウトフレームワークを使用しています。私はko.utils.arrayFilterを使用してフィルタリングできる観測可能な配列を持っています 今、配列をリセットするボタンを追加したいと思います。 配列は、入力フィールドがキーストロークを使用して空になった場合にリセットされますように、私は、入力フィールドを空にし、キー

self.resetFilter = function(){ 

     $('#filter').val(''); 
     var e = $Event("keypress"); 
     e.which = 13; 

     $("#filter").trigger(e); 


    }; 

ないコードが間違っている場合は、必ずを押下すると、それをシミュレートしたかったです。ノックアウトを使用してリセットしていないので、これがノックアウトの問題である場合フィルタリング機能のための全体のコードとHTMLでのデータバインディングの下

Javascriptが

self.stringStartsWith = function(string, startsWith) { 
string = string || ""; 
if (startsWith.length > string.length) 
    return false; 
return string.substring(0, startsWith.length) === startsWith; 
}; 



self.filter = ko.observable(''); 

self.filteredItems = ko.computed(function() { 



var filter = self.filter().toLowerCase(); 

self.resetFilter = function() { 

    $('#filter').val(''); 

    var e = $Event("keypress"); 
    e.which = 13; 

    $("#filter").trigger(e); 


}; 


if (!filter) { 
    return self.venueList(); 
} else { 
    return ko.utils.arrayFilter(self.venueList(), function(venue) { 
     console.log(venue); 
     return self.stringStartsWith(venue.name.toLowerCase(), filter); 
     console.log(venue); 
    }); 
} 
}, self.venueList); 

}; 

HTML

<li> 
<input placeholder="Search" id="filter" type="text" data-bind="value: filter, valueUpdate: 'afterkeydown'" autocomplete="off"> 

<button data-bind="click: function(){resetFilter();}">Reset</button> 
</li> 

Answer 1

はノックアウトの美しさは、あなたが使うことができることですDATA-あなたがしたいことを達成するための束縛。それはjQueryのような他のライブラリとうまくいっていますが、おそらくより洗練されたノックアウト専用のソリューションを見つけることができます。あなたはノックアウトをリセットして使用していないと言いました。それには理由がありますか？

valueUpdate: 'afterkeydown'の代わりにtextInputバインディングを使用することができます。希望する結果が検索の流れの点ではわかりませんが、あなたの質問に入力した内容に基づいてこの例を置いています一緒に。押すと、あなたのフィルタをリセット入力 - 私はそれがあなたの意図した動作であれば、それはUXの観点から少し奇妙なようとしてわからないんだけど、そこにそれにもかかわらず

var ViewModel = function() { 
 

 
    var self = this; 
 
    self.filter = ko.observable(); 
 

 
    self.list = ko.observableArray([ 
 
    "fruit", 
 
    "bread", 
 
    "dad", 
 
    "zoo", 
 
    "keyboard", 
 
    "monkey", 
 
    "tiger", 
 
    "apple", 
 
    "bicycle", 
 
    "father", 
 
    "mother", 
 
    "test", 
 
    "computer", 
 
    "programming", 
 
    "ninja", 
 
    "love", 
 
    "earth", 
 
    "nothing", 
 
    "money" 
 
    ]); 
 

 
    self.filteredList = ko.computed(function() { 
 
    return ko.utils.arrayFilter(self.list(), function(item) { 
 
     return item.toLowerCase().indexOf(self.filter()) > -1; 
 
    }); 
 

 
    }); 
 

 
    self.clearFilter = function() { 
 
    self.filter(''); 
 
    } 
 

 
    self.onEnter = function(d, e) { 
 
    if (e.keyCode === 13) { 
 
     //alert("You want to search for: " + self.filter()); 
 
     self.clearFilter(); 
 
    } 
 
    return true; 
 
    } 
 

 
} 
 

 
ko.applyBindings(new ViewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<input type="text" placeholder="Search" data-bind="textInput: filter, event: { keypress: onEnter }" /> 
 
<input type="button" data-bind="click: clearFilter" value="Reset" /> 
 

 
<ul data-bind="foreach: filteredList"> 
 
    <li data-bind="text: $data"></li> 
 
</ul>