JQuery autocomplete how to write label in autocomplete text input?

Question

Hello I am using jQuery UI autocomplete.

I am getting values and labels from the drop down area. I will write the value in a hidden input and use it later. I could d

Answer 1

A tiny plugin for a general purpose solution:

(function($) {
    $.fn.autocompleteHidden = function($hiddenInput, autocompleteOpts) {
        if ('string' == typeof $hiddenInput) {
            $hiddenInput = $($hiddenInput);
        }
        var $input = this;
        var opts = $.extend({}, autocompleteOpts, {
            focus: function(evt, ui) {
                $input.val(ui.item.label);
                if (autocompleteOpts.focus) {
                    autocompleteOpts.focus.apply(this, arguments);
                }
                return false;
            }
            , select: function(evt, ui) {
                $hiddenInput.val(ui.item.value);
                $input.val(ui.item.label);
                if (autocompleteOpts.select) {
                    autocompleteOpts.select.apply(this, arguments);
                }
                return false;
            }
        });
        this.autocomplete(opts);
        $input.change(function(evt) {
            if (/^\s*$/.test(this.value)) {
                $hiddenInput.val('');
            }
        });
    };
})(jQuery);

So where you'd use yourInput.autocomplete(options), you instead use yourInput.autocompleteHidden(selectorOrJqueryObject, options). This has the benefit of still allowing additional focus and select options, without repeated code. It also clears the hidden input when no (visible) value is entered in the main input.