Get a search box to filter results

Question

I have a list of filter buttons that filter gallery items. Filtering works well and the state of the filter is stored in the session store. I am trying to link a search box and a button.

The behavior that I am trying to achieve is when someone enters the search field, then clicks the search button or clicks the button, their record is passed to the filter function and the results of the comparison are displayed.

I find it difficult to get a string and assign it to a variable. I had a problem with the filter working on this variable.

I made a fiddle to demonstrate: https://jsfiddle.net/ewebster/Lxveeq65/22/

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 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 doesn't work. I understand that a button can call a function when clicked, or a function can listen to a click on the button ID. In any case, I could not pick up the input for the search.

The form may require a POST method, depending on where I ask.

Answer 1

When you click the button, the form submits and the page reloads. There is no need to use a form if you can do it locally.

I updated the script to remove the form and added a new click handler. You can add another event listener to process the input key and perform the same action.

I could not determine from your question whether you need a POSTED form or not. It seemed to me that they were just looking for the client side, so my answer omitted 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(); } }); 

Answer 2

Your code submits the form and sends back. Change the search button to type 'button' like <button id="searchBtn" class="searchButton" type="button" >search</button> This will prevent the default type from "submit".

After that, you just need to call the same code that you use for the other buttons and pull searchterm out of $('#searchEntry').val() .