After having a few small wins with JS (still very much a learner) I have now inherited a task which is to change a reductive search of sorts.
Users now want to have the search work from a submit button, instead of a keyup after 3rd character.
I have had a look through the large JS file, and located the search function which contains the keyup function.
F.initSearch = function(opts){
if(!opts || !opts.ele){
return;
}
if(!opts.start_length){
this.opts.search.start_length = 2
}
this.$search_ele = $(this.opts.search.ele);
if(this.$search_ele.length){
this.has_search = true;
this.searchFn = this.buildSearchFn(opts.fields);
this.bindEvent(opts.ele, 'keyup');
}
};
However, I am having difficulty with changing over from keyup to button click. The JS is way above my current skill level.
This is what I have done:
I have updated the form to include the button
<form>
<div class="searchBox">
<input type="text" id="search" class="search__text-input" placeholder="Search"/>
</div>
<div class="formBox">
<button id="searchbtn">Search</button>
</div>
</form>
I have tried to update the script with some jquery which follows the same pattern
$( "#searchbtn" ).this.bindEvent(opts.ele, 'click');
Lastly, I have attempted to then update the existing - which is now leaving me somewhat defeated:
F.initSearch = function(opts) {
if(!opts || !opts.ele) {
return;
}
if(!opts.start_length) {
this.opts.search.start_length = 2
}
this.$search_ele = $(this.opts.search.ele);
if(this.$search_ele.length) {
this.has_search = true;
this.searchFn = this.buildSearchFn(opts.fields);
// this.bindEvent(opts.ele, 'keyup');
/* Trying to swap keyup for button click */
$( "#searchbtn" ).this.bindEvent(opts.ele, 'click');
}
};
How I have structured in the past:
<input type='button' value='Submit search' onClick='submitSearch()' />
<script language="javascript" type="text/javascript">
function submitSearch() {
$("#searchId").submit();
}
</script>
Sorry for my long winded question. I am still learning Javascript, and would really appreciate someone who is willing to share some knowledge to put me back on track.
Here is my JSFiddle https://jsfiddle.net/mcmacca002/bo0y3u7p/2/
Thank you.
By using $( "#searchbtn" ).this.bindEvent(opts.ele, 'click'); you were close!
First, you need to figure out what the function bindEvent() does.
F.bindEvent = function(ele, eventName) {
var self = this;
$(document).on(eventName, ele, function(e) {
self.filterTimer(self.opts.timeout || 35);
});
};
It is requiring two parameters: Element and event name
So this is how you should pass the element to that function:
this.bindEvent($('#searchbtn').ele, 'click');
Now, when you click on that button, the form will be submitted, and you probably don't want that. So either you have to remove your <form> tag or simply add e.preventDefault(); to your F.bindEvent function.
See the updated code on JSFiddle.
You can do something like this https://jsfiddle.net/86ae9bkn/
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<h3>Search</h3>
<input type="text" id="search-box" placeholder="Type here …" />
<button id="search-btn">Search</button>
<ul id="results"></ul>
<script>
$("#search-btn").click(function () {
let matches = []
let input = $("#search-box").val()
let list = document.getElementById("results")
let data =
[
{ title: "Robert Tester" },
{ title: "John Citizen" },
{ title: "Paul Persons" }
]
for (let i = 0; i < data.length; i++) {
let str = Object.values(data[i]).join().toLowerCase()
if (str.includes(input.toLowerCase())) {
matches.push(data[i])
}
}
list.innerHTML = matches.map(i => `<li>${i.title}</li>`).join("")
})
</script>