Ich habe Probleme beim Versuch, die automatische Vervollständigung richtig zum Laufen zu bringen.
Für mich sieht alles in Ordnung aus, aber ...
<script>
$(function () {
$("#customer-search").autocomplete({
source: 'Customer/GetCustomerByName',
minLength: 3,
select: function (event, ui) {
$("#customer-search").val(ui.item.label);
$("#selected-customer").val(ui.item.label);
}
});
});
</script>
<div>
<input id="customer-search" />
</div>
@Html.Hidden("selected-customer")
Wenn ich jedoch ein Element aus der Dropdown-Liste auswähle, wird der Wert anstelle der Beschriftung auf das Textfeld angewendet.
Was habe ich falsch gemacht?
Wenn ich die Quelle mit Firebug betrachte, kann ich sehen, dass mein verstecktes Feld korrekt aktualisiert wird.
jquery
asp.net-mvc
jquery-ui
autocomplete
jquery-ui-autocomplete
Taucher Dan
quelle
quelle
Antworten:
Das Standardverhalten des
select
Ereignisses besteht darin, dasinput
mit zu aktualisierenui.item.value
. Dieser Code wird nach Ihrem Ereignishandler ausgeführt.Einfach zurück
false
oder anrufenevent.preventDefault()
, um dies zu verhindern. Ich würde auch empfehlen, etwas Ähnliches für dasfocus
Ereignis zu tun, um zu verhindern,ui.item.value
dass es in die platziert wird,input
wenn der Benutzer über Auswahlmöglichkeiten schwebt:Beispiel: http://jsfiddle.net/andrewwhitaker/LCv8L/
quelle
$("#selected-customer").val(ui.item.value);
label
anstelle des aktualisierenvalue
.focus
stattdessen alles einselect
. Problem wirditem.value
statt gesetztitem.label
. Wie auch immer, um dies zu umgehen?lookup.autocomplete({ source: data, focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label) status.text(ui.item.value) submitted.text(ui.item.submitted) comments.html(ui.item.comments) } })
Ich möchte nur hinzufügen, dass Sie diesen Selektor verwenden können , anstatt das Eingabeelement durch "id" in den Rückruffunktionen zum Auswählen und Fokussieren zu referenzieren :
Dies ist nützlich, wenn Sie die automatische Vervollständigung für mehrere Elemente zuweisen, dh nach Klasse:
quelle
In meinem Fall muss ich ein anderes Feld 'id' in einer versteckten Eingabe aufzeichnen. Also füge ich den vom Ajax-Aufruf zurückgegebenen Daten ein weiteres Feld hinzu.
Und haben einen Link "Neu erstellen" am Ende der Liste hinzugefügt. Wenn Sie auf "Neu erstellen" klicken, wird ein Modal angezeigt und Sie können von dort aus ein neues Element erstellen.
Ich denke, der Punkt ist, dass Sie jedes zusätzliche Datenfeld hinzufügen können, außer nur 'label' und 'value'.
Ich benutze Bootstrap Modal und es kann wie folgt sein:
quelle