Javascript：清空输入字段并按回车答案

【问题标题】：Javascript: Empty an input field and press enterJavascript：清空输入字段并按回车
【发布时间】：2016-07-09 21:10:44
【问题描述】：

我使用淘汰赛框架。我有一个可以使用 ko.utils.arrayFilter 过滤的可观察数组现在，我想添加一个按钮来重置数组。当使用击键清空输入字段时数组会重置，我想通过清空输入字段然后按回车键来模拟它

 self.resetFilter = function (){

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

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


    };

不确定，如果代码错误。或者如果这是 Knockout 的问题，因为我没有使用 Knockout 进行重置。

下面是过滤功能和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>

【问题讨论】：

设置值后，触发按键前需要触发change事件。
感谢您的帮助。我确实看到输入字段被清空了，那么更改事件会做什么？我尝试将击键代码包装在更改函数中，并尝试仅添加 $('#filter').trigger('change()');，到目前为止没有成功。
应该是.trigger('change') - "change" 后面没有括号。
我也试过了，还是不行

标签： javascript jquery knockout.js

【解决方案1】：

淘汰赛的美妙之处在于您可以使用数据绑定来完成您想做的事情。虽然它与 jQuery 等其他库配合得很好，但您可能会找到更优雅的仅淘汰赛解决方案。您提到您没有使用淘汰赛来重置。这有什么原因吗？

此外，您可以使用 textInput 绑定而不是使用 valueUpdate: 'afterkeydown' 我不确定在搜索流程方面您想要的结果是什么，但根据您在问题中提供的内容，我把这个一起举例。按 Enter 会重置您的过滤器 - 我不确定这是否是您的预期行为，因为从 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>

【讨论】：