jquery autocomplete dropdown example

Keywords | autocomplete textbox in jquery, autocomplete textbox javascript, jquery autocomplete dropdown example, jquery autocomplete multiple values example

Autocomplete TextBox in jQuery

The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The <datalist> element, a new addition to the HTML5 specification, allows developers to create native autocomplete dropdowns for their web applications.

jQuery Autocomplete Dropdown Example

The following article shows jquery autocomplete multiple values example with CSS. Find the source code below:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>How To Create Autocomplete on an Input Field</title>
    <link rel="stylesheet" type="text/css" href="css/smart-forms.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-custom.min.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            var countryTags = [
                "Albania",
                "Algeria",
                "Andorra",
                "Angola",
                "Australia",
                "Austria",
                "Bahamas",
                "Bahrain",
                "Bangladesh",
                "Barbados",
                "Belarus",
                "Belgium",
                "Belize",
                "Benin",
                "Botswana",
                "Brazil",
                "Burma",
                "Burundi",
                "Cambodia",
                "Cameroon",
                "Canada",
                "Chad",
                "Chile",
                "China",
                "Colombia",
                "Comoros",
                "Congo"
            ];

            $("#countryList").autocomplete({
                source: countryTags
            });

            var smartTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            function split(val) {
                return val.split(/,\s*/);
            }
            function extractLast(term) {
                return split(term).pop();
            }
            $("#multipleTags")
                .bind("keydown", function (event) {
                    if (event.keyCode === $.ui.keyCode.TAB &&
                        $(this).autocomplete("instance").menu.active) {
                        event.preventDefault();
                    }
                })
                .autocomplete({
                    minLength: 0,
                    source: function (request, response) {
                        response($.ui.autocomplete.filter(
                            smartTags, extractLast(request.term)));
                    },
                    focus: function () {
                        return false;
                    },
                    select: function (event, ui) {
                        var terms = split(this.value);
                        terms.pop();
                        terms.push(ui.item.value);
                        terms.push("");
                        this.value = terms.join(", ");
                        return false;
                    }
                });
        });
    </script>
</head>

<body>
    <h1>jQuery Autocomplete Dropdown Example with Multiple Values</h1>
    <div class="smart-wrap">
        <div class="smart-forms smart-container wrap-3">

            <div class="form-header header-primary">
                <h4><i class="fa fa-pencil-square"></i> Autocomplete </h4>
            </div><!-- end .form-header section -->

            <form method="post" action="/" id="account2">
                <div class="form-body">

                    <div class="section">
                        <label for="countryList" class="field-label">Basic </label>
                        <label class="field">
                            <input type="text" name="countryList" id="countryList" class="gui-input" placeholder="Enter Country">
                        </label>
                    </div><!-- end section -->

                    <div class="section">
                        <label for="multipleTags" class="field-label">Select Multiple Items</label>
                        <label class="field">
                            <input type="text" name="multipleTags" id="multipleTags" class="gui-input" placeholder="Select multiple items">
                        </label>
                    </div><!-- end section -->

                </div><!-- end .form-body section -->
                <div class="form-footer">
                    <button type="submit" class="button btn-primary"> Send Form </button>
                </div><!-- end .form-footer section -->
            </form>

        </div><!-- end .smart-forms section -->
    </div><!-- end .smart-wrap section -->
    <div></div><!-- end section -->
</body>
</html>

Download Code

What do you think?

I hope you liked this article based on jQuery autocomplete textbox and how to create autocomplete on an input field. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

LEAVE A REPLY

Please enter your comment!
Please enter your name here