Javascript: Пусто поле ввода и нажмите ввод

Question

Я использую рамки нокаута. У меня есть наблюдаемый массив, который можно отфильтровать с помощью 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> 

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