Autocomplete Anwenden von Wert ohne Beschriftung auf Textfeld

86

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.

Taucher Dan
quelle
1
Was sehen Sie in der JSON-Antwort in Firebug?
SLaks
[{"label": "Tom Smith", "value": "1234"}, {"label": "Tommy Smith", "value": "12321"}]
Diver Dan

Antworten:

211

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/

Andrew Whitaker
quelle
1
Sehr hilfreich! $("#selected-customer").val(ui.item.value);
Meinten
1
@juanignaciosl: Nein - dieser Code soll das Suchfeld mit dem labelanstelle des aktualisieren value.
Andrew Whitaker
Ich speichere den Wert bei db not label, also möchte ich das nächste Mal eine entsprechende Tabelle basierend auf dem Wert festlegen. Wie geht das?
parth.hirpara
1
Hey, versuche etwas Ähnliches zu tun, aber setze focusstattdessen alles ein select. Problem wird item.valuestatt gesetzt item.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) } })
Batman
Gleich hier möchte ich Beschriftung anzeigen, Wert POSTed. Ich habe es geschafft, einen Kludge mit einem versteckten Element zusammenzufügen (ähnlich wie @ Yang Zhangs Antwort unten, aber an diesem Punkt sieht es so aus, als wäre das Rollen meiner eigenen Autovervollständigung der am wenigsten unelegante Ansatz.
Lori
15

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);
    }
});
Vlad
quelle
8

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>

Yang Zhang
quelle