I am planning to create a search engine for local html files in local server to search for html files by name and choose a folder from the list.
the main idea is to find .html files based on user input and he/she also must choose a folder from the list here is a code that has dropdown list, search box and submit button it now works fine on main folder but I need it to search in listed folders only
function redirect(){
var url=document.getElementById('test').value
window.location = url+".html"
}
function handleKeyUp(event) {
if (event.keyCode === 13) { //13 is enter keycode
redirect();
}
}<select id="selectid">
<option j-link="" value="" selected="">please choose folder</option>
<option j-link="./1/" value="">folder1</option>
<option j-link="./2/" value="">folder2</option>
<option j-link="./3/" value="">folder3</option>
</select>
<input id="test" type="text" autofocus onkeyup="handleKeyUp(event)">
<button type="button" onclick="redirect()">Submit</button>event.keyCode === 13.options of the select field instead of value="" or else every option you select will return an empty string.Try this
document.addEventListener('DOMContentLoaded', function(){
let form = document.getElementById('search-form');
let folder = form.querySelector('[name="folder"]');
let file = form.querySelector('[name="file"]');
form.addEventListener('submit', event => {
event.preventDefault();
let folderValue = folder.value.trim();
let fileValue = file.value.trim();
if( folderValue && fileValue ){
window.location = folderValue+'/'+fileValue+".html"
}else{
file.focus();
}
})
})<form id="search-form">
<select name="folder">
<option j-link="" value="" selected>please choose folder</option>
<option j-link="./1/" value="folder1">folder1</option>
<option j-link="./2/" value="folder2">folder2</option>
<option j-link="./3/" value="folder3">folder3</option>
</select>
<input type="text" name="file" autofocus>
<button type="submit">Submit</button>
</form>You need for that approach a backend. For example PHP, nodejs, phyton. For two reasons:
1.) First to generate the entire opportunity (folders) automatically
2.) To search in the selected server
From your frontend you will pass the location to the backend. And the backend can search and give a resonse to the frontend.