Después de tener algunas pequeñas victorias con JS (todavía un gran aprendiz), ahora he heredado una tarea que es cambiar una especie de búsqueda reductiva.
Los usuarios ahora quieren que la búsqueda funcione desde un botón de envío, en lugar de una tecla después del tercer carácter.
Eché un vistazo al gran archivo JS y localicé la función de búsqueda que contiene la función keyup.
F.initSearch = function(opts){ if(!opts || !opts.ele){ return; } if(!opts.start_length){ this.opts.search.start_length = 2 } this.$search_ele = $(this.opts.search.ele); if(this.$search_ele.length){ this.has_search = true; this.searchFn = this.buildSearchFn(opts.fields); this.bindEvent(opts.ele, 'keyup'); } };Sin embargo, tengo dificultades para cambiar de pulsación de tecla a clic de botón. El JS está muy por encima de mi nivel de habilidad actual.
Esto es lo que he hecho:
He actualizado el formulario para incluir el botón
<form> <div class="searchBox"> <input type="text" id="search" class="search__text-input" placeholder="Search"/> </div> <div class="formBox"> <button id="searchbtn">Search</button> </div> </form>He intentado actualizar el script con algo de jquery que sigue el mismo patrón.
$( "#searchbtn" ).this.bindEvent(opts.ele, 'click');Por último, intenté actualizar el existente, que ahora me está dejando algo derrotado:
F.initSearch = function(opts) { if(!opts || !opts.ele) { return; } if(!opts.start_length) { this.opts.search.start_length = 2 } this.$search_ele = $(this.opts.search.ele); if(this.$search_ele.length) { this.has_search = true; this.searchFn = this.buildSearchFn(opts.fields); // this.bindEvent(opts.ele, 'keyup'); /* Trying to swap keyup for button click */ $( "#searchbtn" ).this.bindEvent(opts.ele, 'click'); } };Cómo he estructurado en el pasado:
<input type='button' value='Submit search' onClick='submitSearch()' /> <script language="javascript" type="text/javascript"> function submitSearch() { $("#searchId").submit(); } </script>Perdón por mi larga pregunta. Todavía estoy aprendiendo Javascript, y realmente agradecería a alguien que esté dispuesto a compartir algunos conocimientos para volver a encarrilarme.
Aquí está mi JSFiddle https://jsfiddle.net/mcmaca002/bo0y3u7p/2/
Gracias.
Usando $( "#searchbtn" ).this.bindEvent(opts.ele, 'click'); estuviste cerca!
Primero, debe averiguar qué hace la función bindEvent() .
F.bindEvent = function(ele, eventName) { var self = this; $(document).on(eventName, ele, function(e) { self.filterTimer(self.opts.timeout || 35); }); };Requiere dos parámetros: elemento y nombre del evento .
Así es como debes pasar el elemento a esa función:
this.bindEvent($('#searchbtn').ele, 'click'); Ahora, cuando haga clic en ese botón, se enviará el formulario y probablemente no quiera eso. Entonces, debe eliminar su etiqueta <form> o simplemente agregar e.preventDefault(); a su función F.bindEvent .
Vea el código actualizado en JSFiddle .
Puedes hacer algo como esto https://jsfiddle.net/86ae9bkn/
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <h3>Search</h3> <input type="text" id="search-box" placeholder="Type here …" /> <button id="search-btn">Search</button> <ul id="results"></ul> <script> $("#search-btn").click(function () { let matches = [] let input = $("#search-box").val() let list = document.getElementById("results") let data = [ { title: "Robert Tester" }, { title: "John Citizen" }, { title: "Paul Persons" } ] for (let i = 0; i < data.length; i++) { let str = Object.values(data[i]).join().toLowerCase() if (str.includes(input.toLowerCase())) { matches.push(data[i]) } } list.innerHTML = matches.map(i => `<li>${i.title}</li>`).join("") }) </script>