JQuery UI Autocomplete Example

jQuery · 11-Apr-2023

Hi Guys,

In this example,I will learn you how to use jquery ui autocomplete.you can easy use jquery ui autocomplete.

Autocomplete mechanism is frequently used in modern websites to provide the users a list of suggestion while typing the beginning word in the text box.

This feature prevents the users from having to enter an entire word or a set of words.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JQuery UI Autocomplete Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
    <style type="text/css">
        .ui-widget{
            text-align: center;
            margin-top:40px;
        }
        label{
            position: relative;
            top:-10px;
            font-size:20px; 
        }
        input{
            width: 30%;
            padding: .375rem .75rem;
            line-height: 1.5;
            color: #495057;
            border: 1px solid #ced4da;
            border-radius: .25rem;
        }
        .ui-widget-content{
            text-align: left;
        }
    </style>
<body>
    <h2>JQuery UI Autocomplete Example - NiceSnippets.com</h2> 
    <div class="ui-widget">
        <label for="tags">Search Tags: </label><br>
        <input id="tags">
    </div>

 
    <script>
        $( function() {
            var availableTags = [
                "Laravel",
                "Bootstrap",
                "jQuery",
                "Php",
                "C",
                "C++",
                "Ajax",
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });
    </script>
</body>
</html>

It will help you...