how to find html files based on user input and dropdownlist

user_9637252 0
Viewed 77

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>

html javascript
2 Answers
  • I will suggest you use a form and listen to a submit event on it rather than using event.keyCode === 13.
  • You have to pass the correct value for each of the 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>

user_62142100

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.

user_148071110
Related