0
192
ViewsHTML/js search box with keywords mapped to links
I have this Search form on my website. I dont want to incorporate a search engine, but instead (since content doesnt change that often) i just want the Search box to suggest links on my website matching the input.
I am thinking of providing keywords and their links
"apple" -> http://website.com/fruits.html
"banana" -> http://website.com/fruits.html
"strawberry" -> http://website.com/fruits.html
Kind of like an autocomplete but with suggestions pointing to the same link. So a dropdown list doesnt work in this case. I have tried datatables and other solutions mentioned in this post (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>
Does someone know how to do this?
3 answers
Answer question0
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" />It seems that autocomplete plugins will be satisfied for you.
There're many autocomplet plugins.
First of all, I'll recommend to use http://easyautocomplete.com,
(useful examples are there for you.)
Also, jquery ui autocomplet plugin https://www.tutorialspoint.com/jqueryui/jqueryui_autocomplete.htm
0
I'd put your elements into an object then use find to check if there's a match when then input changes
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
this method will be helpful if files/keywords/suggestion are in low number
use Jquery Autocomplete, every time someone upload a page e.g apple.html you will have insert its link/name to the database and for existing pages link/name should be added to database, later page work like below example and
<!----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>