How to Create Autocomplete Search Box in jQuery?

HTML

CSS

* {
            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

$(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();
                }

});
        });

Ui Code Snippets

How to Create Autocomplete Search Box in jQuery?

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

How to Create Autocomplete Search Box in jQuery?

HTML

CSS

JS

Output

Network Marketing

SEO Course