how do set a default value with jquery autocomplete combobox.

Question

when using the jquery ui autocomplete combobox, can you set a deafult value of the combobox ?

Answer 1

function setAutoCompleteCombo(id,value,display) {

if($(id+"[value="+value+"]").text().localeCompare("")==0){
    $("<option value='"+value+"'>"+display+"</option>").appendTo($(id));
}
$(id).val(value);
$(id).next().val($(id+" :selected").text());

}

I solve by this function on initial page or runtime

example

setAutoCompleteCombo('#frmData select#select_id',option_value,option_text);

Answer 2

Call the option method to set the box's value after you've initialized it.

$('#combo').autocomplete( "option" , optionName , [value] )

Answer 3

may be this will help you

http://forum.jquery.com/topic/autocomplete-default-value

Answer 4

I tried answer this in the way that I would do it in my own project.

I read through the demo source code from the page you posted. In the jquery code that generates the autocomplete combobox, I added one line of code that processes when the combobox is created that reads the selected value from your "select" element. This way you can programmatically set the default value (like you would normally if you were not using the autocomplete combobox)

Here is the one line I added:

input.val( $("#combobox option:selected").text());

Plain and simple. It sets the value of input to the text value of the selected element from #combobox. Naturally, you will want to update the id elements to match your individual project or page.

Here it is in context:

(function($) {
    $.widget("ui.combobox", {
        _create: function() {
            var self = this;
            var select = this.element.hide();
            var input = $("<input>")
                .insertAfter(select)
                .autocomplete({
                    source: function(request, response) {
                        var matcher = new RegExp(request.term, "i");
                        response(select.children("option").map(function() {
                            var text = $(this).text();
                            if (this.value && (!request.term || matcher.test(text)))
                                return {
                                    id: this.value,
                                    label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                                    value: text
                                };
                        }));
                    },
                    delay: 0,
                    change: function(event, ui) {
                        if (!ui.item) {
                            // remove invalid value, as it didn't match anything
                            $(this).val("");
                            return false;
                        }
                        select.val(ui.item.id);
                        self._trigger("selected", event, {
                            item: select.find("[value='" + ui.item.id + "']")
                        });

                    },
                    minLength: 0
                })
                .addClass("ui-widget ui-widget-content ui-corner-left");



            // This line added to set default value of the combobox
            input.val( $("#combobox option:selected").text());





            $("<button>&nbsp;</button>")
            .attr("tabIndex", -1)
            .attr("title", "Show All Items")
            .insertAfter(input)
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            }).removeClass("ui-corner-all")
            .addClass("ui-corner-right ui-button-icon")
            .click(function() {
                // close if already visible
                if (input.autocomplete("widget").is(":visible")) {
                    input.autocomplete("close");
                    return;
                }
                // pass empty string as value to search for, displaying all results
                input.autocomplete("search", "");
                input.focus();
            });
        }
    });

})(jQuery);

Answer 5

Answer #1 is very close, but you cannot hard-code the element ID if you want to keep the function generic. Add this line instead and enjoy!

input.val(jQuery("#"+select.attr("id")+" :selected").text() );

Answer 6

I've tweaked the responses here to use the select variable already defined by the combobox to find the selected option and use that. This means it is generic for which ever element you have defined the combobox on (using id, class or selector ) and will work for multiple elements also.

input.val(select.find("option:selected").text());

Hope this helps someone!

Answer 7

input.val( $(select).children("option:selected").text());

Answer 8

Based on Mathieu Steele answer, instead of using this:

input.val( $("#combobox option:selected").text());

I use this:

input.val( $(select).find("option:selected").text());

Widget is now reusable and DRY :)