How to get jQuery Autocomplete to pop up on field

Question

This question already has answers here:

Closed 8 years ago.

Possible Duplicate:
jQuery autocomplete UI- I'd like it to start the search onfocus without the user having to type anything

jQuery UI Autocomplete

I want the options to appear as soon as my input is focused. Is there a setting for that? I tried setting minLength to 0, but it doesn't work... it still waits for a keypress.

Answer 1

$("#yourField").bind('focus', function(){ $(this).autocomplete("search"); } );

Here a jsfiddle: http://jsfiddle.net/fpHf4/2/ Updated one (for IE): http://jsfiddle.net/q9ERL/4/

As enlighted by @HoldOffHunger you must also set minLength to 0

Answer 2

I think u are breaking "autocomplete" utility just making a stylized select, thats the reason to wait for a keypress to have something to complete.

I know its not the anser u looking for, just remember this u trying to do just work with few options, if there are many u will get hard autocomple div load on firsts letters.

Or maybe u can have a 10 result records on ur sql query if is from this so get fast without loading all sort of results

--- I test focus bind on ie8, it fails, by the way its no a fail it does exactly what u want open div box on focus, the difference is that IE fires onFocus event whith jquery focus event, not like the others so su must evaluate on focus event if field its empty launch search , if is not just do nothing.. i hope this helps.

$("#yourField").bind('focus', function(){
  if($(this).val()!=""){ 
     $(this).autocomplete("search");
  } 
});

Answer 3

Here's my full solution (it does a few other things too):

$.fn.ajaxselect = function(options) {
    var settings = {
        delay: 300,
        sourceData: function(term) {
            return {term:term};
        },
        sourceUrl: null,
        select: function(item) {},
        html: true,
        minLength: 0,
        autoSelect: true,
        autoFocus: true,
        showOnClick: null
    };

    if(options) $.extend(settings, options);
    if(settings.showOnClick === null) settings.showOnClick = settings.minLength === 0;

    $(this).autocomplete({
        source: function(request, response) {
            var data = settings.sourceData.call(this.element[0], request.term);
            if(data === false) {
                response([]);
                return;
            }
            $.ajax({
                url: settings.sourceUrl,
                dataType: 'json',
                data: data,
                success: function(data, textStatus, $xhr) {
                    response(data);
                },
                error: function($xhr, textStatus) {
                    response([]);
                }
            });
        },
        focus: function(e, ui) {
            return false; // don't fill input with highlighted value
        },
        search: function(e, ui) {
            if(settings.minLength < 0 && e.hasOwnProperty('originalEvent')) return false;  // don't search on keypress if minLength < 0 (use with showOnClick)
            $(this).data('lastSearch', this.value);
            return true;
        },
        select: function(e, ui) {
            if(!settings.autoSelect && e.keyCode === 9) return false; // don't select highlighted item on tab unless autoSelect is enabled
            if($(this).val() === $(this).data('lastSearch')) {
                if(settings.select.call(this, ui.item) !== false) {
                    $(this).val(ui.item.value);
                }
                $(this).data('selectedValue',$(this).val()).trigger('change');
            } 
            return false;
        },
        open: function(e, ui) {
            $(this).data('isOpen', true);
        },
        close: function(e, ui) {
            $(this).data('isOpen', false);
        },
        minLength: settings.minLength,
        autoFocus: settings.autoFocus,
        delay: settings.delay,
        html: settings.html
    }).bind('change.ajaxselect', function() {
        $(this).toggleClass('ajax-selected', $(this).val() === $(this).data('selectedValue'));
    });

    if(settings.autoSelect) {
        $(this).bind('autocompletechange.ajaxselect', function(event, ui) {
            if($(this).val() !== $(this).data('selectedValue') && this.value.length > 0) {
                var self = this;
                var data = $.extend({autoSelect:1},settings.sourceData.call(this, this.value));
                $(this).addClass('.ui-autocomplete-loading');
                $.ajax({
                    url: settings.sourceUrl,
                    dataType: 'json',
                    data: data,
                    success: function(data, textStatus, $xhr) {
                        if(data.length >= 1) {
                            var item = $.ui.autocomplete.prototype._normalize(data)[0];
                            if(settings.select.call(self, item) !== false) {
                                $(self).val(item.value);
                            }
                            $(self).data('selectedValue',$(self).val()).trigger('change');
                        }
                    },
                    complete: function($xhr, textStatus) {
                        $(self).removeClass('.ui-autocomplete-loading');
                    }
                });
            }
        });
    }

    if(settings.showOnClick) {
        $(this).bind('click.ajaxselect', function(e) {
            if(!$(this).data('clickHandled') && !$(this).data('isOpen')) {
                $(this).data('clickHandled',true);
                $(this).autocomplete('search','');
            } else {
                $(this).data('clickHandled',false);
            }
        }).bind('focus.ajaxselect', function(e) {
            if(!$(this).data('clickHandled') && e.hasOwnProperty('originalEvent') && $(this).val() === this.defaultValue && !$(this).data('isOpen')) {
                $(this).data('clickHandled',true);
                $(this).autocomplete('search','');
            } else {
                $(this).data('clickHandled',false);
            }
        })
    }

    return $(this);
};

Answer 4

Here's a solution that doesn't pop open the list a second time after selecting an item (as mentioned by Mark) and also works when the input box already has text:

jQuery autocomplete UI- I'd like it to start the search onfocus without the user having to type anything