wake-up-neo.com

Autovervollständigung beim Anwenden eines Werts ohne Beschriftung auf das Textfeld

Ich habe Probleme beim Versuch, die Autovervollständigung zum Funktionieren zu bringen.

Es sieht für mich 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 Bezeichnung auf das Textfeld angewendet.

Was habe ich falsch gemacht?

Wenn ich mit firebug auf die Quelle schaue, kann ich sehen, dass mein verstecktes Feld korrekt aktualisiert wird.

jqueryasp.net-mvcjquery-uiautocompletejquery-ui-autocomplete
83
Diver Dan

Das Standardverhalten des Ereignisses select besteht darin, das Ereignis input mit ui.item.value Zu aktualisieren. Dieser Code führt after Ihren Event-Handler aus.

Geben Sie einfach false zurück oder rufen Sie event.preventDefault() auf, um dies zu verhindern. Ich würde auch empfehlen, für das focus -Ereignis etwas Ähnliches zu tun, um zu verhindern, dass ui.item.value In das input eingefügt wird, wenn der Benutzer den Mauszeiger über die Auswahl bewegt:

$("#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/

201
Andrew Whitaker

Ich möchte nur hinzufügen, dass das Eingabeelement nicht durch "id" im Inneren referenziert wird wählen und fokus Rückruffunktionen, die Sie verwenden können dies Selektor, wie:

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

dies ist nützlich, wenn Sie die automatische Vervollständigung für mehrere Elemente zuweisen, d. h. nach Klasse:

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

In meinem Fall muss ich ein anderes Feld 'id' in einer versteckten Eingabe aufzeichnen. Also füge ich ein weiteres Feld in die Daten ein, die vom Ajax-Aufruf zurückgegeben wurden.

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

Und haben am Ende der Liste einen Link "Neu erstellen" hinzugefügt. Wenn Sie auf "Neu erstellen" klicken, wird ein Modal geöffnet, 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 als nur "Label" und "Wert" hinzufügen können.

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>
7
Yang Zhang