Autouzupełnianie z zastosowaniem wartości nie etykiety do pola tekstowego

86

Mam problemy z próbą uzyskania prawidłowego działania autouzupełniania.

Dla mnie wszystko wygląda dobrze, ale ....

<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")

Jednak gdy wybiorę element z listy rozwijanej, wartość zostanie zastosowana do pola tekstowego zamiast etykiety.

Co zrobiłem źle?

Jeśli spojrzę na źródło za pomocą firebuga, widzę, że moje ukryte pole jest poprawnie aktualizowane.

Diver Dan
źródło
1
Co widzisz w odpowiedzi JSON w Firebug?
SLaks
[{"label": "Tom Smith", "value": "1234"}, {"label": "Tommy Smith", "value": "12321"}]
Diver Dan

Odpowiedzi:

215

Domyślnym zachowaniem selectzdarzenia jest aktualizacja za inputpomocą ui.item.value. Ten kod jest uruchamiany po programie obsługi zdarzeń.

Po prostu wróć falselub zadzwoń, event.preventDefault()aby temu zapobiec. Poleciłbym również zrobić coś podobnego w focusprzypadku zdarzenia, aby zapobiec ui.item.valueumieszczaniu go w polu, inputgdy użytkownik najedzie kursorem na opcje:

$("#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);
    }
});

Przykład: http://jsfiddle.net/andrewwhitaker/LCv8L/

Andrew Whitaker
źródło
1
Bardzo przydatne! Czy nie $("#selected-customer").val(ui.item.value);
chodziło
1
@juanignaciosl: Nie - ten kod ma na celu aktualizację pola wyszukiwania za pomocą labelzamiast value.
Andrew Whitaker
Przechowuję wartość w db nie etykiecie, więc następnym razem chcę ustawić zgodnie z etykietą na podstawie wartości. Jaki jest na to sposób?
parth.hirpara
1
Hej, próbuję zrobić coś podobnego, ale focuszamiast tego włóż wszystko select. Problem jest item.valueustawiany zamiast item.label. W każdym razie, aby to obejść? 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
To samo tutaj, chcę wyświetlić etykietę, wartość POST. Udało mi się połączyć ze sobą kludge obejmujący ukryty element (podobnie jak odpowiedź @Yang Zhang poniżej, ale w tym momencie wygląda na to, że użycie własnego autouzupełniania będzie najmniej nieeleganckim podejściem.
Lori
15

Chciałbym tylko dodać, że zamiast odwoływać się do elementu wejściowego przez „id” wewnątrz funkcji wywołania zwrotnego zaznaczania i ustawiania ostrości , możesz użyć tego selektora, na przykład:

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

jest to przydatne, gdy przypisujesz autouzupełnianie do wielu elementów, tj. według klas:

$(".className").autocomplete({
...
    focus: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    }
});
Vlad
źródło
8

W moim przypadku muszę zapisać kolejne pole „id” w ukrytym wejściu. Więc dodaję kolejne pole w danych zwróconych z wywołania ajax.

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

Dodałem link „utwórz nowy” u dołu listy. Po kliknięciu `` utwórz nowy '', pojawi się modal, z którego możesz utworzyć nowy element.

$('#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');
            }
        }
    );

Myślę, że chodzi o to, że możesz dodać dodatkowe pole danych inne niż tylko „etykieta” i „wartość”.

Używam modalu bootstrap i może być jak poniżej:

<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
źródło