テキストボックスにラベルではなく値を適用するオートコンプリート


86

オートコンプリートを正しく機能させるのに問題があります。

それはすべて私には大丈夫に見えますが....

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

ただし、ドロップダウンからアイテムを選択すると、ラベルではなくテキストボックスに値が適用されます。

私は何を間違えましたか?

firebugを使用してソースを見ると、非表示フィールドが正しく更新されていることがわかります。


1
FirebugのJSON応答には何が表示されますか?
SLaks 2011年

[{"label": "Tom Smith"、 "value": "1234"}、{"label": "Tommy Smith"、 "value": "12321"}]
ダイバーダン

:それを参照してくださいstackoverflow.com/questions/6716266/...

回答:


215

selectイベントのデフォルトの動作は、で更新するinputことui.item.valueです。このコードは、イベントハンドラーの後に実行さます。

これが発生しないfalseようevent.preventDefault()にするには、単に戻るか電話してください。また、ユーザーが選択肢にカーソルを合わせたときにに配置されfocusないように、イベントに対して同様のことを行うことをお勧めします。ui.item.valueinput

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


1
非常に便利!あなたは意味しませんでした$("#selected-customer").val(ui.item.value);
juanignaciosl 2013年

1
@juanignaciosl:いいえ-そのコードは、検索ボックスを。のlabel代わりに更新することを目的としていますvalue
Andrew Whitaker 2013年

ラベルではなくdbに値を格納しているので、次回は値に基づいてラベルに従って設定したいと思います。そうする方法は何ですか?
parth.hirpara 2016

1
ねえ、似たようなことをしようとしていますが、のfocus代わりにすべてを入れてくださいselect。のitem.value代わりに問題が設定されていますitem.label。とにかくこれを回避するには? 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) } })
バットマン

ここでも同じですが、ラベルを表示し、値をPOSTします。私は一緒に以下@Yang張さんの回答に似て隠された要素を(含むその場しのぎにパッチを適用するために管理しなかったが、この時点では、少なくとも無粋なアプローチになります私自身のオートコンプリートを転がすように見ている。
ロリ

15

selectおよびfocusコールバック関数内で「id」によって入力要素を参照する代わりに、次のようにこのセレクターを使用できます。

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

複数の要素にオートコンプリートを割り当てる場合、つまりクラスごとに便利です。

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

8

私の場合、非表示の入力に別のフィールド「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>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.