Autocomplete Anwenden von Wert ohne Beschriftung auf Textfeld

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.

Das Standardverhalten des selectEreignisses besteht darin, das inputmit zu aktualisieren ui.item.value. Dieser Code wird nach Ihrem Ereignishandler ausgeführt.

Einfach zurück falseoder anrufen event.preventDefault(), um dies zu verhindern. Ich würde auch empfehlen, etwas Ähnliches für das focusEreignis zu tun, um zu verhindern, ui.item.valuedass es in die platziert wird, inputwenn der Benutzer über Auswahlmöglichkeiten schwebt:

$("#customer-search").autocomplete({
    /* snip */
    select: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
        $("#selected-customer").val(ui.item.label);
    },
    focus: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
    }
});

Beispiel: http://jsfiddle.net/andrewwhitaker/LCv8L/

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 :

$(this).val(ui.item.label);

Dies ist nützlich, wenn Sie die automatische Vervollständigung für mehrere Elemente zuweisen, dh nach Klasse:

$(".className").autocomplete({
...
    focus: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    }
});

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.

{label:"Name", value:"Value", id:"1"}

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.

$('#vendorName').autocomplete
    (
        {
            source: "/Vendors/Search",
            minLength: 2,
            response: function (event, ui)
            {
                ui.content.push
                ({
                    label: 'Add a new Name',
                    value: 'Add a new Name'
                });
            },
            select: function (event, ui)
            {
                $('#vendorId').val(ui.item.id);
            },
            open: function (event, ui)
            {
                var createNewVendor = function () {
                    alert("Create new");
                }
                $(".ui-autocomplete").find("a").last().attr('data-toggle', 'modal').addClass('highLight');
                $(".ui-autocomplete").find("a").last().attr('href', '#modal-form').addClass('highLight');
            }
        }
    );

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:

<div id="modal-form" class="modal fade" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">

            </div>
        </div>
    </div>
</div>