텍스트 상자에 레이블이 아닌 값을 적용하는 자동 완성

Question 1

자동 완성 기능이 제대로 작동하도록하는 데 문제가 있습니다.

다 괜찮아 보이지만 ....

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

그러나 드롭 다운에서 항목을 선택하면 값이 레이블 대신 텍스트 상자에 적용됩니다.

내가 뭘 잘못 했어?

방화범을 사용하여 소스를 보면 숨겨진 필드가 올바르게 업데이트되고 있음을 알 수 있습니다.

Question 2

의 기본 동작 select이벤트를 업데이트하는 것입니다 input함께 ui.item.value. 이 코드는 이벤트 핸들러 후에 실행됩니다 .

이런 일이 발생하지 않도록 간단히 돌아가 false거나 전화하십시오 event.preventDefault(). 사용자가 선택 항목을 가리킬 때 focus이벤트 ui.item.value에 배치되는 것을 방지하기 위해 이벤트에 대해 비슷한 작업을 수행하는 것이 좋습니다 input.

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

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

Question 3

그냥 대신 "ID"에 의해 입력 요소를 참조의 내부에 그것을 추가 할 선택 하고 초점 콜백 기능을 사용할 수있는 이 같은 선택을 :

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

여러 요소, 즉 클래스별로 자동 완성을 할당 할 때 유용합니다.

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

Question 4

제 경우에는 숨겨진 입력에 다른 필드 'id'를 기록해야합니다. 그래서 ajax 호출에서 반환 된 데이터에 다른 필드를 추가합니다.

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

그리고 목록 하단에 '새로 만들기'링크를 추가했습니다. '새로 만들기'를 클릭하면 모달이 나타나고 거기에서 새 항목을 만들 수 있습니다.

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

요점은 '라벨'과 '값'외에 다른 데이터 필드를 추가 할 수 있다는 것입니다.

나는 부트 스트랩 모달을 사용하며 다음과 같을 수 있습니다.

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