텍스트 상자에 레이블이 아닌 값을 자동으로 적용

텍스트 상자에 레이블이 아닌 값을 자동으로 적용

자동 완성을 제대로 작동시키는 데 문제가 있습니다.

내가 보기엔 다 괜찮아 보이지만..

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

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

제가 무엇을 잘못했지요?

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

의 기본 동작입니다.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/

선택 및 포커스 콜백 함수 안에서 입력 요소를 "id"로 참조하는 대신 다음과 같은 선택기를 사용할 수 있습니다.

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

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

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

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

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

그리고 목록 하단에 '새로 만들기' 링크를 추가했습니다.create new(새로 만들기)'를 클릭하면 modal(모달)이 팝업되고 거기서 새 항목을 만들 수 있습니다.

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

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

부트스트랩 모드를 사용하며 다음과 같을 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/7642855/autocomplete-applying-value-not-label-to-textbox