HTML/js search box with keywords mapped to links

Issue

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?

Solution

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

Answered By - coding monster