HTML/js search box with keywords mapped to links

Question

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?

coding monster · Accepted Answer · 2021-09-21T05:42:28.700

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

i see it works in the simulation. But i can't get it to work on my webpage. I put the first part inside a inside the and the second part into the of the page? — AndiAna, Sep 21 '21 at 06:59
@AndiAna Just not swap the order, and the insertion position can be anywhere. But i usally use css in and js at the endof — coding monster, Sep 21 '21 at 07:14
Oh i got it. sorry i am very new to more advanced html. I enclosed your first part with — AndiAna, Sep 21 '21 at 08:08

score -1 · Answer 2 · answered Sep 21 '21 at 04:58

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>

Shubham Dange · Answer 3 · 2021-09-21T05:06:22.667

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>

HTML/js search box with keywords mapped to links

3 Answers3