Estoy planeando crear un motor de búsqueda para archivos html locales en el servidor local para buscar archivos html por nombre y elegir una carpeta de la lista.
la idea principal es encontrar archivos .html basados en la entrada del usuario y él/ella también debe elegir una carpeta de la lista. Aquí hay un código que tiene una lista desplegable, un cuadro de búsqueda y un botón de envío. Ahora funciona bien en la carpeta principal, pero lo necesito. para buscar solo en las carpetas enumeradas
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 .option del campo de selección en lugar de value="" o, de lo contrario, cada opción que seleccione devolverá una cadena vacía.Prueba esto
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>Necesitas para ese enfoque un backend. Por ejemplo PHP, nodejs, phyton. Por dos razones:
1.) Primero en generar toda la oportunidad (carpetas) automáticamente
2.) Para buscar en el servidor seleccionado
Desde tu frontend pasarás la ubicación al backend. Y el backend puede buscar y dar una respuesta al frontend.