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.

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.