AutoComplete AutoComplete is an input widget providing real-time suggestions when being typed..

Basic

Dropdown

Content

Multiple

Remote

$('#input').puiautocomplete({
    completeSource: //array or a function
});
                                
<input id="basic" name="basic" type="text"/>
                                
Name Type Default Description
delay integer 300 Delay in milliseconds before doing a search.
minQueryLength Integer 1 Minimum length of input value to run a query.
multiple boolean false Enables multiple selection mode.
dropdown boolean false Displays a dropdown button next to the input field to search all items.
scrollHeight integer 200 Maximum height of the suggestions panel in pixels.
forceSelection boolean false When enabled, input value is restricted only with suggested items.
effect string null Name of effect to display when showing suggestions.
effectSpeed int/string normal Duration in milliseconds or keywords like slow, normal and fast.
effectOptions object null Additional options for effect, refer to jQuery UI effect api.
content function null Function that returns string as html content of an item for customizable suggestions.
caseSensitive boolean false Defines if search on a local datasource should be case sensitive.
Name Parameters Description
select event: puiautocompleteselect event
item: selected item from callback.
Fired when suggested item is selected.

Example

$('#basic').puiautocomplete({
    select: function(event, item) {
        //...
    }
});
                                
Name Parameters Description
search query: Query string to search. Initiates a search with given query.
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.

Example

$('#basic').puiautocomplete('search', 'A');
                                
<script type="text/javascript">
    $(function() {
        var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", ...);

        var themes = new Array('afterdark', 'afternoon', 'afterwork', 'aristo', 'black-tie', 'blitzer', 'bluesky', 'bootstrap', 'casablanca', 'cruze',
        'cupertino', 'dark-hive', 'dot-luv', 'eggplant', 'excite-bike', 'flick', 'glass-x', 'home', 'hot-sneaks', 'humanity', 'le-frog', 'midnight',
        'mint-choc', 'overcast', 'pepper-grinder', 'redmond', 'rocket', 'sam', 'smoothness', 'south-street', 'start', 'sunny', 'swanky-purse', 'trontastic',
        'ui-darkness', 'ui-lightness', 'varder');

        $('#basic').puiautocomplete({
            completeSource: countries
        });

        $('#dropdown').puiautocomplete({
            completeSource: countries,
            dropdown: true
        });

        $('#customcontent').puiautocomplete({
            completeSource: themes,
            content: function(data) {
                return '<img src="resources/demo/images/themes/' + data.label + '.png" alt="" /><span style="float:right;font-size:14px">' 
                    + data.label + '</span>';
            }
        });

        $('#multiple').puiautocomplete({
            completeSource: countries,
            multiple: true,
            select: function(event, item) {
                $('#growl').puigrowl('show', [{severity: 'info', summary: 'City Selected', detail: item.data('label')}]);
            },
            unselect: function(event, item) {
                $('#growl').puigrowl('show', [{severity: 'info', summary: 'City Unselected', detail: item.data('label')}]);
            }
        });

        $('#remote').puiautocomplete({
            effect: 'fade',
            effectSpeed: 'fast',
            completeSource:function(request, response) {
                $.ajax({
                    type: "GET",
                    url: './autocomplete',
                    data: {query: request.query},
                    dataType: "json",
                    context: this,
                    success: function(data) {
                        response.call(this, data);
                    }
                });
            }
        });

        $('#growl').puigrowl(); 
    });
</script>
                                
<h3 class="title title-short" style="margin-top: 0px;">Basic</h3>
<input id="basic" name="basic" type="text"/>

<h3 class="title title-short">Dropdown</h3>
<input id="dropdown" name="dropdown" type="text"/>

<h3 class="title title-short">Callback</h3>
<input id="callback" name="callback" type="text"/>

<h3 class="title title-short">Multiple</h3>
<input id="multiple" name="multiple" type="text"/>

<h3 class="title title-short">Remote</h3>
<input id="remote" name="remote" type="text"/>

<div id="growl"></div>