Get search box to filter results
I have a list of filter buttons that filter gallery items. The filtering works well, and the filter state is saved in session storage. I'm trying to link up the search box and button.
The behavior I'm trying to achieve is when someone types into the search box then hits enter or clicks search button, their entry is passed to the filter function and matching results are shown.
I'm having trouble getting the string and assigning it to a variable. I'm having trouble getting the filter to work on that variable.
I made a fiddle to demonstrate: https://jsfiddle.net/ewebster/Lxveeq65/22/
The JS:
$(document).ready(function () {
//declare a global variable
var filterVal;
//check if sessionStorage exists and if so, if there is a var called fillTerm
//if not, set it to a default value (all)
if (sessionStorage && sessionStorage.getItem("filTerm")) {
filterVal = sessionStorage.getItem("filTerm");
} else {
filterVal = "all";
sessionStorage.setItem("filTerm", filterVal);
}
//now let's attach some interaction to our buttons
$(".filter-button").on("click", function () {
//get the value for our filter
filterVal = $(this).attr("data-filter");
//store it in the session storage
sessionStorage.setItem("filTerm", filterVal);
console.log(sessionStorage);
console.log(filterVal);
//call our view update function
updateView();
});
//this is the function that manipulates the UI
function updateView() {
//default situation: all is visible
if (!filterVal || filterVal === "all") {
$('.filter').show();
}
//hide all and show filtered values
else {
$(".filter").hide();
$('.filter').filter('.' + filterVal).show();
console.log("searchTerm");
console.log("filterVal");
}
};
//update the view when the page loads
updateView();
$(".searchButton").click(function () {
var term = $(this).attr('data-filter');
var searchTerm = document.getElementById("searchEntry").value;
console.log("searchTerm");
console.log("filterTerm");
})
});
The searchButton function at the end is what is not working. I realize the button can trigger the function on click or the function can listen for a click on id of the button. In any case I haven't been able to pick up the search input.
The form may need method POST, depends where I ask.
When you click the button, the form is submitted and the page reloads. There is no need to use a form if you can render it all locally.
I have updated the fiddle to remove the form, and added a new click handler. You can add another event listener to handle the enter key and perform the same action.
I couldn't determine from your question whether you required the form to be POSTed or not. It seemed to me that were just looking for client side, hence my answer drops the form.
https://jsfiddle.net/Lxveeq65/39/
$("#searchBtn").on("click",function(){
filterVal = $('#searchEntry').val();
sessionStorage.setItem("filTerm", filterVal);
updateView();
});
$("#searchEntry").on("keypress",function(e){
if (e.keyCode == 13) {
filterVal = $('#searchEntry').val();
sessionStorage.setItem("filTerm", filterVal);
updateView();
}
});
Your code is submitting the form and posting back. Change the search button to type'button' like <button id="searchBtn" class="searchButton" type="button" >search</button> This prevents the default type of "submit".
After that you just need to call the same code that you use for the other buttons and pull the searchterm from $('#searchEntry').val() .
上一篇: 使用Gradle Build Flavors的Android Auto Setup
下一篇: 获取搜索框以过滤结果