The following code snippet will activate the input field by pressing a key on your keyboard. The key binding can we modified based on your requirement.
1
2
3
4
5
6
7
8
9
10
|
<form>
<input type="text" id="search-input" placeholder="$ grep...">
</form>
<!-- If you have a button to activate search field like in this website -->
<li class="search-icon">
<a href="javascript:void(0)" id="search-button">
<i class="fa fa-search"></i>
</a>
</li>
|
2. Functionality - JavaScript code
In this website the search can be activated by pressing / key on your keyboard.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// app.js (app.min.js)
function handle_search_activation(event, searchInput, search_button) {
let KEY_TO_ACTIVATE_SEARCH = 's' ;
if (event.key === KEY_TO_ACTIVATE_SEARCH) {
searchInput.focus();
searchInput.innerHTML = "";
search_button.click();
console.log("Pressed s to activate search.");
}
return;
}
window.onload = function () {
console.log("Document loaded...");
let searchInput = document.querySelector("#search-input");
let search_button = document.querySelector("#search-button");
document.addEventListener("keyup", (event) => {
handle_search_activation(event, searchInput, search_button);
});
};
|
3. Link the script file in your html
Add the file in head or footer. You can also copy-paste the code in an existing js file to reduce the number of files requested.
1
2
3
4
5
|
<head>
...
<script defer src="/js/app.min.js" type="text/javascript"></script>
...
</head>
|
Also, customize the UI according to your liking.
That’s it. you now you can press a key to activate the search input and start typing. You also add a submit button and press enter to search.
Thanks.