Comment définir une valeur par défaut avec jquery auto complete combobox?

J'ai essayé de répondre à cette question dans la façon dont je le ferais dans mon propre projet.

J'ai lu à travers la démo de code source de la page que vous avez posté. Dans le jquery, le code qui génère la saisie semi-automatique de zone de liste déroulante, j'ai ajouté une ligne de code que le processus de la zone de liste déroulante est créé qui lit la valeur sélectionnée à partir de votre "select" de l'élément. De cette façon, vous pouvez définir par programmation la valeur par défaut (comme vous le feriez normalement, si vous n'étiez pas à l'aide de la saisie semi-automatique combobox)

Ici est la une ligne, j'ai ajouté:

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

Pure et simple. Il définit la valeur d'entrée à la valeur de texte de l'élément sélectionné à partir de #combobox. Naturellement, vous souhaitez mettre à jour l'id d'éléments pour correspondre à votre projet individuel ou de la 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>&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);

Réponse #1 est très proche, mais vous ne pouvez pas coder en dur l'IDENTIFIANT de l'é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() );

J'ai modifié un peu les réponses ici d'utiliser la sélection de la variable déjà définie par la zone de liste déroulante pour trouver l'option sélectionnée et l'utiliser. Cela signifie qu'il est générique pour tout ce qui a jamais élément que vous avez défini la zone de liste déroulante (à l'aide de l'id, la classe ou le sélecteur ) et va travailler pour plusieurs éléments.

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

Espère que cela aide quelqu'un!

Appeler le option méthode pour définir la zone de valeur après avoir initialisé.

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

input.val( $(select).children("option:selected").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 par l'appel de cette fonction sur la page initiale ou de l'exécution. Exemple:

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

Ajouter en-dessous d'Une Ligne de Code avant " this._on( this.input, { " ligne

this.input[0].defaultValue = value;

après avoir créer le code de la saisie semi-automatique combobox script.
Vous pouvez également réinitialiser avec le bouton de réinitialisation de html.