How to Create Autocomplete Search Box in jQuery?

HTML

CSS

Output

HTML Copied

CSS Copied

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

body {
            height: 100vh;
        }

main {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100%;
        }

.searchListMainDiv {
            min-width: 40%;
            margin: 0 1rem;
            position: relative;
        }

.searchListMainDiv ul {
            position: absolute;
            list-style: none;
            padding: 0;
            margin: 0;
            margin-top: 0.5rem;
            box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
            border: 1px solid rgb(255, 255, 255);
            width: 100%;
            max-height: 200px;
            overflow-y: auto;
        }

.searchListMainDiv ul::-webkit-scrollbar {
            width: 5px;
        }

.searchListMainDiv ul::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px #ddd;
            border-radius: 10px;
        }

.searchListMainDiv ul::-webkit-scrollbar-thumb {
            background: rgb(183, 183, 183);
            border-radius: 10px;
        }

.searchListMainDiv ul::-webkit-scrollbar-thumb:hover {
            background: #a2a2a2;
        }

.searchListMainDiv input {
            background-image: url('https://www.teknowize.com/attachments/file_1658670439.svg');
            background-size: 21px;
            background-repeat: no-repeat;
            background-position: 98% 50%;
            height: 35px;
            width: 100%;
            box-shadow: none;
            border: 1px solid #ddd;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
            padding: 0 2.5rem 0 1rem;
            color: #333;
            font-size: 18px;
        }

.searchListMainDiv input:focus {
            border: 1px solid #ddd;
            outline: none;
        }

.searchListMainDiv ul li {
            padding: 1.2rem 10px;
            font-size: 18px;
            font-weight: 500;
            line-height: 0;
            border-bottom: 1px solid #ddd;
            color: #333;
            cursor: pointer;
        }

.searchListMainDiv ul li:hover {
            background: rgb(183, 255, 208);
        }

.searchListMainDiv ul li:last-child {
            border: none;
        }

JS Copied

$(document).ready(function () {

var $terms = [
            "apple",
        "apricot",
        "avocado",
        "banana",
        "blueberry",
        "cherry",
        "coconut",
        "carambola",
        "grape",
        "grapefruit",
        "jackfruit",
        "kiwi",
        "lime",
        "lemon",
        "mango",
        "mandarin",
        "melon",
        "nectarine",
        "orange",
        "pear",
        "pomegranate",
        "plum",
        "papaya",
        "pineapple",
        "peach",
        "paspberry",
        "starfruit",
        "strawberry",
        "watermelon",

].sort(),
                $return = [];

function strInArray(str, strArray) {
                for (var j = 0; j < strArray.length; j++) {
                    if (strArray[j].match(str) && $return.length < 5) {
                        var $h = strArray[j].replace(str, '<strong>' + str + '</strong>');
                        $return.push('<li class="prediction-item"><span class="prediction-text">' + $h + '</span></li>');
                    }

}

$(function () {
                $('#search-bar').keydown(function (e) {

setTimeout(function () {
                        var $search = $('#search-bar').val();
                        $return = [];

strInArray($search, $terms);

if ($search == '' || !$('input').val) {
                            $('.output').html('').slideUp();
                        }
                        else {
                            $('.output').html($return).slideDown();
                        }

$('.prediction-item').on('click', function () {
                            $text = $(this).find('span').text();
                            $('.output').slideUp(function () {
                                $(this).html('');
                            });
                            $('#search-bar').val($text);
                        });

$('.prediction-item:first-child').addClass('focus');

}, 50);
                });
            });

$('#search-bar').focus(function () {
                if ($('.prediction-item').length > 0) {
                    $('.output').slideDown();
                }

});
        });