javascripthtmlsearchsearchbar

Redirect keyword search result to a url

I am learning website building, html, css, javascript. I want to know how to redirect a search result to a url on click event.
I have a simple local website, not online, just on my pc. I have few pages on it, with some kind of instructions on each page. There is no back end, or server or database connected. So search only looks at avaialbe hard coded keywords in js file.

I built a search bar with autocomplete. When I start typing in search box, possible matches show up in result box.

search result box

Results are coming from hard coded keywords in javascript file:

let availableKeywords = [
    'how to learn cooking',
    'hot to filter water',
    'how to make a soup',
    'how to use a mixer',
    'how to make flour',
    'how to write a recipe',
    'how to instal light bulb',
    'how to bake a cookie',
    'how to replace hard drive',
];

HTML Code for search box:

@*  Search bar area *@
<div class="search-box">
    <div class="row">
        <input type="text" id="input-box" placeholder="Search..." autocomplete="off" />
        <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
    </div>
   
    <div class="result-box">
        @*  this should be populated by script after searching keywords *@
    </div>
</div>

My JS function to check input box and match to keywords:

inputBox.onkeyup = function () {
    let result = [];
    let input = inputBox.value;
    /*if not zero or null*/
    if (input.length) {
        /* filter will match keywords defined above */
        result = availableKeywords.filter((keyword) => {
            return keyword.toLowerCase().includes(input.toLowerCase());
        });
        /* this is for debugging, it will be displayed in browser-console area */
        console.log(result);
    }
    /* show matches in results box */
    display(result);
    
    if (!result.length) {
        resultsBox.innerHTML = '';
    }
}

/* this will populate drop down box under search field if any matches */
function display(result) {
    const content = result.map((list) => {
        return "<li onclick=selectInput(this)>" + list + "</li>";
    });
    /* insert result list in html page */
    resultsBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}

I would like to be able to redirect to a particular page/url when user clicks on one of the search results. For example if I click on "how to make soup", I want the browser to go to //..makesoup.html

I do not know how to do that. I suspect I need to create a map or dictionary that will map keywords to a url, something that should look like this (i guess): The code below probably has wrong syntaxis, so my bad.

let keywordsWitUrl = [
    { 'how to learn cooking': "learnCooking.html"},
    { 'hot to filter water': "filterWater.html"},
    { 'how to make a soup': "makeSoup.html"},
    { 'how to use a mixer': "useMixer.html"},
    { 'how to make flour': "makeFlour.html"},
    { 'how to write a recipe': "writeRecipe.html"},
    { 'how to instal light bulb': "instalBulb.html"},
    { 'how to bake a cookie': "bakeCookie.html"},
    { 'how to replace hard drive': "replaceHD.html"}
];

I dont know how to do that in javascript and I can not find any help online..

How can I make my search to only search keywords and not associated urls ? How can I bind keywords/full name of the instruction to a url?

I already have "on click" event, right now it just inserts the full name of instruction into the search box, and clears the result box. How do I make page change to correct url when I click on some search result?

/* click event, display full article name and clear result box */
function selectInput(list) {
    inputBox.value = list.innerHTML;
    resultsBox.innerHTML = '';
}

I am not even sure where to start.. Any advice would help.
Thank you.

Solution

  • You can achieve this by getting the keyword from const url = keywordsWithUrl[keyword]; and passing this URL into the tag's href attribute. If you want to add an HTTP to the link, just edit the link tag

    // Keywords array
let availableKeywords = [
    'how to learn cooking',
    'hot to filter water',
    'how to make a soup',
    'how to use a mixer',
    'how to make flour',
    'how to write a recipe',
    'how to instal light bulb',
    'how to bake a cookie',
    'how to replace hard drive'
];

// Mapping each keyword to its corresponding URL
const keywordsWithUrl = {
    'how to learn cooking': 'learnCooking.html',
    'hot to filter water': 'filterWater.html',
    'how to make a soup': 'makeSoup.html',
    'how to use a mixer': 'useMixer.html',
    'how to make flour': 'makeFlour.html',
    'how to write a recipe': 'writeRecipe.html',
    'how to instal light bulb': 'instalBulb.html',
    'how to bake a cookie': 'bakeCookie.html',
    'how to replace hard drive': 'replaceHD.html'
};

// Selecting the input box and results box elements
const inputBox = document.getElementById('input-box');
const resultsBox = document.getElementById('resultsBox');

// Function to handle the keyup event and search for matches
inputBox.onkeyup = function () {
    let result = [];
    let input = inputBox.value;
/*if not zero or null*/
    if (input.length) {
        /* filter will match keywords defined above */
        result = availableKeywords.filter((keyword) => {
            return keyword.toLowerCase().includes(input.toLowerCase());
        });
         /* this is for debugging, it will be displayed in browser-console area */
        console.log(result);
    }
    /* show matches in results box */
    display(result);

    if (!result.length) {
        resultsBox.innerHTML = '';
    }
}

/* this will populate drop down box under search field if any matches */
function display(result) {
    const content = result.map((keyword) => {
        // Get the corresponding URL for each keyword
        const url = keywordsWithUrl[keyword];
        if (url) {
            // Create an <li> with an <a> tag for redirection
            return `<li><a href="${url}">${keyword}</a></li>`;
        } else {
            return `<li>${keyword}</li>`;
        }
    });

   /* insert result list in html page */
    resultsBox.innerHTML = `<ul>${content.join('')}</ul>`;
}
    <!-- HTML for the search box -->
<div class="search-box">
    <div class="row">
        <input type="text" id="input-box" placeholder="Search..." autocomplete="off" />
        <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
    </div>
   
    <div class="result-box" id="resultsBox">
        <!-- This will be populated by JavaScript after matching keywords -->
    </div>
</div>