0
189
VistasCuadro de búsqueda HTML/js con palabras clave asignadas a enlaces
Tengo este formulario de búsqueda en mi sitio web. No quiero incorporar un motor de búsqueda, sino que (dado que el contenido no cambia con tanta frecuencia) solo quiero que el cuadro de búsqueda sugiera enlaces en mi sitio web que coincidan con la entrada.
Estoy pensando en proporcionar palabras clave y sus enlaces.
"apple" -> http://website.com/fruits.html "banana" -> http://website.com/fruits.html "strawberry" -> http://website.com/fruits.htmlAlgo así como un autocompletado pero con sugerencias que apuntan al mismo enlace. Entonces, una lista desplegable no funciona en este caso. Probé tablas de datos y otras soluciones mencionadas en esta publicación (https://stackoverflow.com/questions/36712967/single-dropdown-with-search-box-in-it)
<form action="#" class="header__search"> <input type="text" placeholder="Search"> <button type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.71,20.29,18,16.61A9,9,0,1,0,16.61,18l3.68,3.68a1,1,0,0,0,1.42,0A1,1,0,0,0,21.71,20.29ZM11,18a7,7,0,1,1,7-7A7,7,0,0,1,11,18Z"/></svg></button> <button type="button" class="close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.41,12l6.3-6.29a1,1,0,1,0-1.42-1.42L12,10.59,5.71,4.29A1,1,0,0,0,4.29,5.71L10.59,12l-6.3,6.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l6.29,6.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"/></svg></button> </form> 
¿Alguien sabe cómo hacer esto?
3 Respuestas
Responde la pregunta0
var options = { data: [{ "key": "Apple", "url": "http://website.com/fruits.html" }, { "key": "Grapes", "url": "http://website.com/fruits.html" }, { "key": "Strawberry", "url": "http://website.com/fruits.html" }, { "key": "Dog", "url": "http://website.com/animals.html" }, ], getValue: "key", template: { type: "description", fields: { description: "url" } }, list: { match: { enabled: true } }, theme: "plate-dark" }; $(function() { $("#example-mail").easyAutocomplete(options); }); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" integrity="sha512-TsNN9S3X3jnaUdLd+JpyR5yVSBvW9M6ruKKqJl5XiBpuzzyIMcBavigTAHaH50MJudhv5XIkXMOwBL7TbhXThQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.min.css" integrity="sha512-5EKwOr+n8VmXDYfE/EObmrG9jmYBj/c1ZRCDaWvHMkv6qIsE60srmshD8tHpr9C7Qo4nXyA0ki22SqtLyc4PRw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js" integrity="sha512-Z/2pIbAzFuLlc7WIt/xifag7As7GuTqoBbLsVTgut69QynAIOclmweT6o7pkxVoGGfLcmPJKn/lnxyMNKBAKgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <input id="example-mail" />Parece que los complementos de autocompletar estarán satisfechos por usted.
Hay muchos complementos de autocompletar.
En primer lugar, recomendaré usar http://easyautocomplete.com ,
(Ejemplos útiles están ahí para usted.)
Además, el complemento jquery ui autocomplet https://www.tutorialspoint.com/jqueryui/jqueryui_autocomplete.htm
0
Pondría sus elementos en un objeto y luego usaría find para verificar si hay una coincidencia cuando luego ingrese los cambios
let search = document.getElementById('search'); let result = document.getElementById('result'); let results = [{ "name": "apple", "url": "http://website.com/fruits.html" }, { "name": "banana", "url": "http://website.com/fruits.html" }, { "name": "strawberry", "url": "http://website.com/fruits.html" } ] search.addEventListener('input', (e) => { let query = e.target.value; if (query.length < 2) { // set a minimum number of characters result.innerText = ''; return; } let found = results.find(item => item.name.includes(query)); if (found) { result.innerText = `${found.name}: ${found.url}`; } console.log(found) }) <form action="#" class="header__search"> <input type="text" placeholder="Search" id="search"> </form> <br /> <span id="result"></span>0
este método será útil si los archivos/palabras clave/sugerencias son pocos
use Jquery Autocompletar, cada vez que alguien cargue una página, por ejemplo, apple.html, tendrá que insertar su enlace/nombre en la base de datos y para las páginas existentes, el enlace/nombre debe agregarse a la base de datos, la página posterior funcionará como se muestra a continuación y
<!----html code --- add jquery UI cdn in head --- > <div class="ui-widget"> <label for="tags">Search: </label> <input id="tags"> </div> <!------------------------------------------------> <script> $(function() { var availableTags = [ "apple.html", "samsung.html", "hp.html", /*at this part name of file can be printed from database using php + ajax can be helpful but you need to setup it right*/ ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script>