Come si imposta un valore predefinito con jQuery completamento automatico combobox?

StackOverflow https://stackoverflow.com/questions/2749721

Domanda

Quando si utilizza il jQuery UI autocomplete combobox , si può impostare un valore predefinito per il combobox?

È stato utile?

Soluzione

Ho provato a rispondere a questa nel modo in cui lo farei nel mio progetto.

ho letto attraverso il codice sorgente demo dalla pagina che hai postato. Nel codice jQuery che genera la casella combinata di completamento automatico, ho aggiunto una riga di codice che i processi quando viene creata la casella combinata che legge il valore selezionato dal vostro elemento "select". In questo modo è possibile impostare a livello di codice il valore di default (come si farebbe normalmente se si stesse non si utilizza la casella combinata di completamento automatico)

Questa è la sola riga ho aggiunto: 

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

Chiaro e semplice. Imposta il valore di entrata al valore di testo dell'elemento selezionato da #combobox. Naturalmente, si vuole aggiornare gli elementi identificativi per abbinare il vostro progetto individuale o di pagina.

Qui è in contesto: 

(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);

Altri suggerimenti

In base a Mathieu Steele risposta , invece di utilizzare questo: 

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

Io uso questo: 

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

Widget è ora riutilizzabile e DRY:)

Risposta # 1 è molto vicino, ma non si può codificare l'ID elemento se si desidera mantenere la funzione generica. Aggiungere questa riga al posto e godere! 

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

È possibile raggiungere questo obiettivo modificando la seguente dichiarazione del auto-completer: 

value = selected.val() ? selected.text() : "Select Institution";

ho ottimizzato le risposte qui per utilizzare la variabile di selezione già definito dalla casella combinata per trovare l'opzione selezionata e usare quella. Ciò significa che è generico per il quale mai elemento è stata definita la casella combinata su (con id, classe o selettore) e lavorerà per più elementi anche. 

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

Spero che questo aiuti qualcuno!

metodo add script jquery combobox 

setValue: function(o) {            
    $(this.element).val(o);
    $(this.input).val($(this.element).find("option:selected").text());            
}

Chiamare il metodo option per impostare il valore del dialogo dopo che si è inizializzata esso. 

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

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

Ho usato la sottostante linea di codice, invece, solo un altro modo per raggiungere lo stesso risultato:) 

$('option:selected', this.element).text()

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());
}

ho risolto chiamando questa funzione nella pagina iniziale o runtime. Esempio: 

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

Ho una risposta che ha lavorato per la mia applicazione della casella combinata jQuery UI. Da qualche parte nel mezzo del codice era questo: 

.val(value)

L'ho cambiato in: 

.val(select.val())

e presto, il valore iniziale della casella di testo sottostante è apparso. Sembra a me come questa dovrebbe essere la funzionalità di default, ma che ne so io?

Aggiungi al di sotto di una riga di codice prima di "this._on( this.input, {" linea 

this.input[0].defaultValue = value;

Dopo creare il codice nello script combobox completamento automatico.  È inoltre possibile ripristinare con pulsante di reset di HTML.

I perplesso questo errore e non può risolvere il problema OnLoad evento qualunque ho codificato (probabilmente su 3 ore). Alla fine per fortuna ho acrossed http: // www .onemoretake.com / 2011/04/17 / a-better-jquery-ui-combo-box / pagina web (Thx per @ Dan per risolvere il mio mal di testa) e ha visto la vera parte mancante non è su "OnLoad ", sulla funzione definizione ui stesso. funzione di definizione Standart sulla pagina web ufficiale jQuery UI non contiene programmazione selezionare l'opzione.

Ecco la funzione dovrebbe aggiunto alla funzione definizione: 

//allows programmatic selection of combo using the option value
        setValue: function (value) {
            var $input = this.input;
            $("option", this.element).each(function () {
                if ($(this).val() == value) {
                    this.selected = true;
                    $input.val(this.text);
                    return false;
                }
            });
        }

Inoltre ho realizzato un'altra funzione alla selezione cambiamento tramite testo opzione non valore di opzione 

//allows programmatic selection of combo using the option text
            setValueText: function (valueText) {
                var $input = this.input;
                var selectedText;                   
                $("option", this.element).each(function () {
                    if ($(this).text() == valueText) {
                        this.selected = true;
                        $input.val(this.text);                                                    
                        return false;
                    }
                });                        
            }

È possibile utilizzare queste funzioni su OnLoad o un'altra funzione come: 

$("#yourComboBoxID").combobox("setValue", "Your Option Value");

o 

$("#yourComboBoxID").combobox("setValueText", "Your Option Text");
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top