How to create a search box that opens up folders and files in HTML?

问题

I want to know how I can create a RESPONSIVE (that resizes according to devices) search box in HTML, CSS, & JavaScript, etc that opens up folders and files according to the value that the user inputs. It would be helpful if you can provide me with the full code. I will demonstrate a small example using images that I created using image processing software, so you can fully understand my question. This is how my folders are placed: folders placed preview

The sample search box: search box design preview

The sample search box with values for demonstration: search box demonstration preview

What the result should be; when the user inputs the value “2” in the “text1” field, the search box should select the “…/webpage/2” directory. And when the user inputs the value “1” in the “text2” field the search box should select the folder/file that is inside the folder which is selected by “text1” field, i.e. “…/webpage/2/1.html”. (There should be some relationship between the “text1” and “text2” fields). Also, there should be maximum values determined for the search of the text fields: for "text1" 1-114 number and in "text2" 1-286 number. Please provide me with full code and if any clarification is needed please reply.

The current sample code for my search box

<html>
    <head></head>
    <body>
    <div class="input-group">
      <!-- the "text1" field as displayed in the image -->
        <input type="text" class="form-control" placeholder="enter chapter no"/>
        <span class="input-group-addon"></span>
      <!-- the "text2" field as displayed in the image -->
        <input type="text" class="form-control" placeholder="enter verse no"/>
        <span class="input-group-addon"></span>
      <!-- the "button" field as displayed in the image -->
        <button type="submit"><i class="fa fa-search">GO</i></button>
    </div>
    
    </html>

来源：https://stackoverflow.com/questions/62725184/how-to-create-a-search-box-that-opens-up-folders-and-files-in-html

标签

javascript

html

jquery

css

search-box