Comment définir une valeur par défaut avec la liste déroulante jquery auto complete?
Lorsque vous utilisez jquery ui autocomplete combobox , pouvez-vous définir une valeur par défaut pour la combobox?
J'ai essayé de répondre à cette question de la même manière que dans mon propre projet.
J'ai lu le code source de la démonstration à partir de la page que vous avez publiée. Dans le code jQuery qui génère la liste déroulante autocomplete, j'ai ajouté une ligne de code à traiter lors de la création de la liste déroulante, qui lit la valeur sélectionnée dans 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’utilisiez pas la liste déroulante à complétion automatique).
Voici la ligne que j'ai ajoutée:
input.val( $("#combobox option:selected").text());
Clair et simple. Il définit la valeur de input sur la valeur textuelle de l'élément sélectionné à partir de #combobox. Naturellement, vous voudrez mettre à jour les éléments id pour qu'ils correspondent à votre projet ou à votre page.
Ici c'est dans le 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> </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);
Basé sur Mathieu Steele répond , au lieu d'utiliser ceci:
input.val( $("#combobox option:selected").text());
J'utilise ceci:
input.val( $(select).find("option:selected").text());
Le widget est maintenant réutilisable et DRY :)
Vous pouvez y parvenir en modifiant l'instruction suivante de l'auto-compléteur:
value = selected.val() ? selected.text() : "Select Institution";
La réponse n ° 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. Ajoutez cette ligne à la place et profitez-en!
input.val(jQuery("#"+select.attr("id")+" :selected").text() );
ajouter une méthode à un script jquery combobox
setValue: function(o) {
$(this.element).val(o);
$(this.input).val($(this.element).find("option:selected").text());
}
J'ai peaufiné les réponses ici pour utiliser la variable de sélection déjà définie par la liste déroulante pour rechercher l'option sélectionnée et l'utiliser. Cela signifie qu'il est générique pour chaque élément que vous avez défini (en utilisant id, class ou selector) et qu'il fonctionnera également pour plusieurs éléments.
input.val(select.find("option:selected").text());
J'espère que cela aide quelqu'un!
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 le runtime. Exemple:
setAutoCompleteCombo('#frmData select#select_id',option_value,option_text);
Appelez la méthode option pour définir la valeur de la boîte après l'avoir initialisée.
$('#combo').autocomplete( "option" , optionName , [value] )
J'ai bloqué cette erreur et ne peux pas corriger l'événement OnLoad quel que soit ce que j'ai codé (probablement sur 3 heures). Enfin, heureusement, j'ai traversé http://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/ page Web (merci à @Dan pour avoir résolu mon mal de tête) et vu la vraie partie manquante n'est pas sur "OnLoad", sur la fonction de définition ui elle-même. La fonction de définition standard de la page Web officielle de Jquery Ui ne contient pas d’option de sélection par programme.
Voici la fonction qui devrait être ajoutée à 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;
}
});
}
j'ai aussi produit une autre fonction pour changer la sélection via le texte de l'option, pas la 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 en tant que:
$("#yourComboBoxID").combobox("setValue", "Your Option Value");
ou
$("#yourComboBoxID").combobox("setValueText", "Your Option Text");
peut-être que cela vous aidera
J'ai utilisé la ligne de code ci-dessous à la place, juste une autre façon d'obtenir le même résultat :)
$('option:selected', this.element).text()
J'ai une réponse qui a fonctionné pour mon implémentation de la combobox jQuery UI. Quelque part au milieu du code était ceci:
.val(value)
Je l'ai changé pour:
.val(select.val())
et presto, la valeur initiale de la zone de texte sous-jacente est apparue. Il me semble que cela devrait être la fonctionnalité par défaut, mais que sais-je?
Ajouter ci-dessous une ligne de code avant la ligne "this._on( this.input, {"
this.input[0].defaultValue = value;
après la création du code dans le script de liste déroulante à complétion automatique. Vous pouvez également réinitialiser à l’aide du bouton de réinitialisation html.
input.val( $(select).children("option:selected").text());