web-dev-qa-db-ja.com

jQueryオートコンプリートカテゴリラベルと値の選択

選択した値を検索フィールドに返し、値を別の入力フィールドに返すために、カテゴリを含むjQueryオートコンプリートを取得しようとしています。

データを変更して、値とラベルおよびカテゴリを設定しました。

http://jsfiddle.net/chrisk/bM7ck/ を参照してください

ただし、値は常にラベルではなく検索フィールドに返されます。

jqueryjquery-uiautocompletejquery-ui-autocomplete
19
chrisk

ラベルと値の両方を指定すると、jquery uiオートコンプリートが機能します。ラベルを検索フィールドに返す場合は、値フィールドの名前を変更します。

更新されたフィドル： http://jsfiddle.net/jensbits/bM7ck/3/

27
jk.

あなたは近い、あなたはただする必要があります：

  1. 追加 return falseからselectイベントハンドラの最後まで、および
  2. focusイベントのイベントハンドラーを追加して、値の代わりにラベルを使用して同様にオーバーライドできるようにします。

コードが更新されました：

$("#search").catcomplete({
    delay: 0,
    source: data,
    select: function(event, ui) {
        $('#search').val(ui.item.label);
        $('#searchval').val(ui.item.value);
        return false; // Prevent the widget from inserting the value.
    },
    focus: function(event, ui) {
        $("#search").val(ui.item.label);
        return false; // Prevent the widget from inserting the value.
    }
});

更新された例を次に示します。 http://jsfiddle.net/q2kDU/

22
Andrew Whitaker
$(function() {
        $( "#searchitems" ).autocomplete({
            source: [<?php echo $search /*example for full list in php*/?>],
            minLength: 2,
            select: function(event, ui) {
                event.preventDefault();
                $("#searchitems").val(ui.item.label);
                $('#searchitemvalue').val(ui.item.value);
                window.location="#"; //location to go when you select an item
            },
            focus: function(event, ui) {
                event.preventDefault();
                $("#searchitems").val(ui.item.label);
                $('#searchitemsvalue').val(ui.item.value);
            }
        });
    });
3
Ismael Miguel