Blog Archive

jQuery autocomplete force selection - display list on focus using minLength = 0

How to create a dropdown in jQuery using autocomplete and force selection from list

In this example we created a drop down <SELECT> list by setting the minLength config to 0 and then check for the focus event to trigger a search that brings all the values for the autocomplete. In addition to that when you move away from the input field it compares the input text value to the list data for a match, otherwise just blanks out the field.

There is no force selection config currently available in jQuery autocomplete feature.

dropdown in jQuery using autocomplete and force selection
dropdown in jQuery using autocomplete and force selection

Source for the HTML page - index.html

<html>
<head>
    <title>jQuery Drop Down using AutoComplete and minLength of 0</title>

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <STYLE TYPE="text/css" media="all">
        .ui-autocomplete { 
            position: absolute; 
            cursor: default; 
            height: 150px; 
            overflow-y: scroll; 
            overflow-x: hidden;
        }
    </STYLE>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="app.js"></script>

</head>
<body>

    <form id="jQueryAutocomplete">
        <fieldset>
            <legend>jQuery create Drop down using autocomplete</legend>

                <p>
                    <label for="myDropDown">Just click to see:</label><br />
                    <input id="myDropDown" type="text" name="myDropDown" />
                </p>
        </fieldset>
    </form>

</body>
</html>

Source for the JavaScript file using jQuery - app.js

$(document).ready(function() {

    var source = ['jQuery', 'Dojo', 'ExtJs', 'Prototype', 'Java', 'Android', 'MySQL', 'PHP'];
   
    $("input#myDropDown").autocomplete({
        minLength: 0,
        source: source,
        autoFocus: true,
        scroll: true,
    }).focus(function() {
        $(this).autocomplete("search", "");
    }).live("blur", function(event) {
        var autocomplete = $(this).data("autocomplete");
        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
        autocomplete.widget().children(".ui-menu-item").each(function() {
            //Check if each autocomplete item is a case-insensitive match on the input
            var item = $(this).data("item.autocomplete");
            if (matcher.test(item.label || item.value || item)) {
                //There was a match, lets stop checking
                autocomplete.selectedItem = item;
                return;
            }
        });
        //if there was a match trigger the select event on that match
        if (autocomplete.selectedItem) {
            autocomplete._trigger("select", event, {
                item: autocomplete.selectedItem
            });
        //there was no match, clear the input
        } else {
            $(this).val('');
        }
    });
});

Reference: https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.autoSelect.js


2 comments :

  1. Hello!
    When I use “var source” like source, everything is good. But when I try get dynamic list with next code I have little bug.

    source: function ( request, response ) {
    $.ajax({
    type: "POST",
    url: "listengine.php",
    data: { stext: request.term, slist: dictionary}
    }).done(function(d) {
    response(d); })

    The listbox is not close automatically after choosing item. To close listbox I should click on empty area in the page.
    Can someone give me idea how to fix this?
    Thanks.

    ReplyDelete
  2. That's really good stuff. My buddies at work will definitely be awestruck ! Thanks for sharing.

    ReplyDelete