<!DOCTYPE html>
<html>

<head>
    <title>Search state</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <h2>Search state here..</h2>
    <input type="text" id="my_input" placeholder="Search for state.." title="Type in a name">

    <div>
        <p id="no-results">No match found</p>
        <ul id="ul_list">
            <li><a href="#">UP</a></li>
            <li><a href="#">Bihar</a></li>
            <li><a href="#">MP</a></li>
            <li><a href="#">Delhi</a></li>
            <li><a href="#">Gujarat</a></li>
            <li><a href="#">Maharastra</a></li>
            <li><a href="#">Hariyana</a></li>
        </ul>
    </div>
</body>

<style>
    * {
        box-sizing: border-box;
    }

    .hidden {

        display: none;
    }

    #my_input {

        background-position: 10px 12px;
        background-repeat: no-repeat;
        width: 100%;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        margin-bottom: 12px;
    }

    #ul_list {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    #ul_list li a {
        border: 1px solid #ddd;
        margin-top: -1px;
        background-color: #f6f6f6;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        color: black;
        display: block
    }

    #ul_list li a:hover:not(.header) {
        background-color: #eee;
    }
</style>

<script>
    $(document).ready(function () {

        const


            input = document.getElementById("my_input"),
            noResults = document.getElementById("no-results"),
            list_items = Array.from(document.querySelectorAll("#ul_list li")),

            getUpperText = (li) => {
                const
                    a = li.getElementsByTagName("a")[0],
                    text = a.textContent || a.innerText
                liUpperText = text.toUpperCase();
                return liUpperText;
            },


            hideList = () =>
                list_items.forEach((li) => li.classList.add("hidden"));

        noResults.classList.add("hidden");
        hideList();
        input.addEventListener("keyup", inputListener);

        function inputListener(event) {

            hideList();
            const inputupText = event.target.value.toUpperCase();
            if (inputupText === "") {
                return;
            }
            noResults.classList.remove("hidden");
            for (let li of list_items) {
                if (getUpperText(li).includes(inputupText)) {
                    li.classList.remove("hidden");
                    noResults.classList.add("hidden");
                }
            }
        }

    });
</script>

</html>

Demo Here--------
Search state

Search state here..