Comment définissez-vous une valeur par défaut avec auto jquery combobox complète?

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

Question

Lorsque vous utilisez le jquery ui autocomplete combobox , pouvez-vous définir une valeur par défaut pour le combobox?

Était-ce utile?

La solution

J'ai essayé de répondre à cette de la manière que je le ferais dans mon propre projet.

J'ai lu dans le code source de démonstration de la page que vous avez publié. Dans le code jquery qui génère le combobox autocomplete, j'ai ajouté une ligne de code que les processus lorsque le combobox est créé qui lit la valeur sélectionnée à partir de votre élément « select ». De cette façon, vous pouvez définir par programme la valeur par défaut (comme vous le feriez normalement si vous n'utilisez pas le combobox autocomplete)

Voici une ligne I ajouté: 

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

pure et simple. Il définit la valeur de l'entrée à la valeur de texte de l'élément choisi parmi #combobox. Bien sûr, vous voulez mettre à jour les éléments d'identité pour correspondre à votre projet ou page.

Ici, il est dans son contexte: 

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

Autres conseils

Basé sur Mathieu réponse Steele , au lieu d'utiliser ceci: 

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

J'utilise ceci: 

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

Widget est maintenant réutilisable et DRY:)

Réponse # 1 est très proche, mais vous ne pouvez pas coder en dur l'ID d'élément si vous souhaitez conserver la fonction générique. au lieu Ajouter cette ligne et amusez-vous! 

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

Vous pouvez y parvenir en modifiant la déclaration suivante de l'auto-completer: 

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

J'ai peaufiné les réponses ici pour utiliser la variable de sélection déjà définie par le combobox pour trouver l'option choisie et utiliser. Cela signifie qu'il est générique pour lequel jamais élément que vous avez défini la zone de liste déroulante sur (en utilisant id, classe ou sélecteur) et fonctionnera pour plusieurs éléments aussi. 

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

Espérons que cela aide quelqu'un!

méthode add à l'écriture jquery combobox 

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

Appelez la méthode option pour définir la valeur de la boîte après avoir initialisé il. 

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

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

J'ai utilisé le ci-dessous ligne de code à la place, une autre façon d'atteindre le même résultat:) 

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

Je l'ai résolu en appelant cette fonction sur la page initiale ou de l'exécution. Exemple: 

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

J'ai une réponse qui a travaillé pour ma mise en œuvre du combobox UI jquery. Quelque part au milieu du code était le suivant: 

.val(value)

Je l'ai changé à: 

.val(select.val())

et presto, la valeur initiale de la zone de texte sous-jacent est apparu. Il me semble que cela devrait être la fonctionnalité par défaut, mais qu'est-ce que je sais?

Ajouter ci-dessous une ligne de code avant la ligne "this._on( this.input, {" 

this.input[0].defaultValue = value;

créer après le code dans le script de saisie semi-automatique combobox.  Vous pouvez également réinitialiser avec le bouton de réinitialisation du langage HTML.

Je déconcerté cette erreur et ne peut pas corriger l'événement OnLoad tout ce que je codé (probablement 3 heures). Enfin, heureusement que j'acrossed http: // www .onemoretake.com / 2011/04/17 / un mieux-jquery-ui-combo-box / page Web (pour Thx pour résoudre mon @ Dan maux de tête) et a vu la partie réelle manquante est pas « OnLoad », la fonction de définition ui lui-même. fonction Standart définition sur la page Web officielle Jquery Ui ne contient pas l'option programme de sélection.

Voici la fonction doit ajouté à la fonction de définition: 

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

i également produit une autre fonction à la sélection de changement par texte option non valeur de l'option 

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

Vous pouvez utiliser ces fonctions sur OnLoad ou une autre fonction: 

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

ou 

$("#yourComboBoxID").combobox("setValueText", "Your Option Text");
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top