web-dev-qa-db-ja.com

アイテムとIDを使用したjQuery UIオートコンプリート

1次元配列で機能する次のスクリプトがあります。これを2次元配列で動作させることは可能ですか？次に、ページ上の2番目のボタンをクリックすることにより、選択されたアイテムに、選択されたアイテムのIDが表示されます。

これは、1次元配列のスクリプトです。

var $local_source = ["c++", "Java", "php", "coldfusion", "javascript", "asp", "Ruby"];
$("#txtAllowSearch").autocomplete({
    source: $local_source
});

これは、IDを確認するボタンのスクリプトです。これは不完全です。

$('#button').click(function() {
    // alert($("#txtAllowSearch").someone_get_id_of_selected_item);
});
javascriptjqueryarraysjquery-uijquery-ui-autocomplete
51
oshirowanen

Ui.item.label（テキスト）およびui.item.value（id）プロパティを使用する必要があります

$('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearchID").val()); // get the id from the hidden input
});

[編集]多次元配列の作成方法も尋ねました...

次のように配列を作成できるはずです。

var $local_source = [[0,"c++"], [1,"Java"], [2,"php"], [3,"coldfusion"], 
                     [4,"javascript"], [5,"asp"], [6,"Ruby"]];

多次元配列の操作方法の詳細については、こちらをご覧ください。 http://www.javascriptkit.com/javatutors/literal-notation2.shtml

77
JK.

JQueryオートコンプリートプラグインの[概要]タブから：

ローカルデータは、単純な文字列の配列にすることも、ラベルまたは値プロパティのいずれかまたは両方を持つ配列内の各アイテムのオブジェクトを含むこともできます。ラベルプロパティが提案メニューに表示されます。ユーザーがメニューから何かを選択した後、値は入力要素に挿入されます。 1つのプロパティのみが指定されている場合、両方に使用されます。 value-propertiesのみを提供する場合、値はラベルとしても使用されます。

したがって、「2次元」配列は次のようになります。

_var $local_source = [{
    value: 1,
    label: "c++"
}, {
    value: 2,
    label: "Java"
}, {
    value: 3,
    label: "php"
}, {
    value: 4,
    label: "coldfusion"
}, {
    value: 5,
    label: "javascript"
}, {
    value: 6,
    label: "asp"
}, {
    value: 7,
    label: "Ruby"
}];
_

_ui.item.label_および_ui.item.value_を使用して、focus引数を介して select および ui イベント内のラベルおよび値のプロパティにアクセスできます。

編集

テキストボックス内にID番号を配置しないように、フォーカスを「キャンセル」してイベントを選択する必要があるようです。その間、代わりに隠し変数の値をコピーできます。 ここに例があります 。

34
Salman A

私のコードは、select関数に「return false」を追加したときにのみ機能しました。これがないと、入力は選択関数内で正しい値に設定され、選択関数が終了した後にid値に設定されました。 falseを返すことでこの問題を解決しました。

$('#sistema_select').autocomplete({

    minLength: 3,
    source: <?php echo $lista_sistemas;?> ,
    select: function (event, ui) {
         $('#sistema_select').val(ui.item.label); // display the selected text
         $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input
         return false;
     },
    change: function( event, ui ) {
        $( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 );
    } 
});

さらに、変更イベントに関数を追加しました。1つのアイテムが選択された後にユーザーが入力に何かを書き込んだり、アイテムラベルの一部を消去した場合、非表示フィールドを更新して、間違った（古い）ID。たとえば、ソースが次の場合：

var $local_source = [
       {value: 1,  label: "c++"}, 
       {value: 2,  label: "Java"}]

ユーザーがjaと入力し、オートコンプリートで「Java」オプションを選択すると、値2が非表示フィールドに保存されます。ユーザーが入力フィールドで「jva」で終わる「Java」から文字を消去すると、ユーザーが値を変更したため、コードにid 2を渡すことができません。この場合、IDを0に設定します。

12
Paty Lustosa

他の誰かを助けることができるように、私の目的で働いたものを共有したいだけです。または、上記のPaty Lustosaの回答に基づいて、ソースメソッドにajaxアプローチを使用したこのサイトから派生した別のアプローチを追加できるようにしてください

http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-

キッカーは、phpスクリプト（以下のlisting.php）の結果の「文字列」またはjson形式であり、オートコンプリートフィールドに表示される結果セットは、次のようになります。

    {"list":[
     {"value": 1, "label": "abc"},
     {"value": 2, "label": "def"},
     {"value": 3, "label": "ghi"}
    ]}

次に、オートコンプリートメソッドのソース部分で：

    source: function(request, response) {
        $.getJSON("listing.php", {
            term: request.term
        }, function(data) {                     
            var array = data.error ? [] : $.map(data.list, function(m) {
                return {
                    label: m.label,
                    value: m.value
                };
            });
            response(array);
        });
    },
    select: function (event, ui) {
        $("#autocomplete_field").val(ui.item.label); // display the selected text
        $("#field_id").val(ui.item.value); // save selected id to hidden input
        return false;
    }

これが役立つことを願っています...すべての最高！

7
Benjohn P. Villedo
<script type="text/javascript">
$(function () {
    $("#MyTextBox").autocomplete({
        source: "MyDataFactory.ashx",
        minLength: 2,
        select: function (event, ui) {
            $('#MyIdTextBox').val(ui.item.id);
            return ui.item.label;
        }
    });
});

上記の応答は役立ちましたが、私の実装では機能しませんでした。 jQueryを使用して値を設定する代わりに、関数から選択オプションに値を返しています。

MyDataFactory.ashxページには、Id、Label、Valueの3つのプロパティを持つクラスがあります。

リストをJavaScriptシリアライザーに渡し、応答を返します。

4
Eric Rohlfs

ソース配列内のオブジェクトにidプロパティがあると仮定します...

var $local_source = [
    { id: 1, value: "c++" },
    { id: 2, value: "Java" },
    { id: 3, value: "php" },
    { id: 4, value: "coldfusion" },
    { id: 5, value: "javascript" },
    { id: 6, value: "asp" },
    { id: 7, value: "Ruby" }];

現在のインスタンスを取得して、そのselectedItemプロパティを調べると、現在選択されているアイテムのプロパティを取得できます。この場合、選択したアイテムのIDを警告します。

$('#button').click(function() {
    alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});
4
Nattrass

値とラベルのプロパティをハックしたり、非表示の入力フィールドを使用したり、イベントを抑制したりする必要はないと思います。各オートコンプリートオブジェクトに独自のカスタムプロパティを追加して、後でそのプロパティ値を読み取ることができます。

以下に例を示します。

$(#yourInputTextBox).autocomplete({
    source: function(request, response) {
        // Do something with request.term (what was keyed in by the user).
        // It could be an AJAX call or some search from local data.
        // To keep this part short, I will do some search from local data.
        // Let's assume we get some results immediately, where
        // results is an array containing objects with some id and name.
        var results = yourSearchClass.search(request.term);

        // Populate the array that will be passed to the response callback.
        var autocompleteObjects = [];
        for (var i = 0; i < results.length; i++) {
            var object = {
                // Used by jQuery Autocomplete to show
                // autocomplete suggestions as well as
                // the text in yourInputTextBox upon selection.
                // Assign them to a value that you want the user to see.
                value: results[i].name;
                label: results[i].name;

                // Put our own custom id here.
                // If you want to, you can even put the result object.
                id: results[i].id;
            };

            autocompleteObjects.Push(object);
        }

        // Invoke the response callback.
        response(autocompleteObjects);
    },
    select: function(event, ui) {
        // Retrieve your id here and do something with it.
        console.log(ui.item.id);
    }
});

documentation は、ラベルと値のプロパティを持つオブジェクトの配列を渡す必要があることを示しています。ただし、これらの2つのプロパティよりもmoreのオブジェクトを確実に渡し、後で読み取ることができます。

ここに私が言及している関連部分があります。

配列：配列はローカルデータに使用できます。次の2つの形式がサポートされています。ラベルプロパティは提案メニューに表示されます。ユーザーがアイテムを選択すると、値が入力要素に挿入されます。プロパティが1つだけ指定されている場合は、両方に使用されます。たとえば、値のプロパティのみを指定した場合、値はラベルとしても使用されます。

2
Kevin Lee

最後に私はたくさんの友人に感謝し、氏 https://stackoverflow.com/users/87015/salman-a に特別な感謝をしました。彼のコードのおかげで、適切に解決できました。グルーヴィーな杯を使用しているので、最終的に私のコードは次のようになります。これが誰かに役立つことを願っています。

私のgspページでhtmlコードは次のようになります

  <input id="populate-dropdown" name="nameofClient" type="text">
  <input id="wilhaveid" name="idofclient" type="text">

スクリプト関数は私のgspページでこのようなものです

  <script>
        $( "#populate-dropdown").on('input', function() {
            $.ajax({
                url:'autoCOmp',
                data: {inputField: $("#populate-dropdown").val()},
                success: function(resp){
                    $('#populate-dropdown').autocomplete({
                        source:resp,
                        select: function (event, ui) {
                            $("#populate-dropdown").val(ui.item.label);
                            $("#wilhaveid").val(ui.item.value);
                             return false;
                        }
                    })
                }
            });
        });
    </script>

そして、私のコントローラーコードはこんな感じ

   def autoCOmp(){
    println(params)
    def c = Client.createCriteria()
    def results = c.list {
        like("nameOfClient", params.inputField+"%")
    }

    def itemList = []
    results.each{
        itemList  << [value:it.id,label:it.nameOfClient]
    }
    println(itemList)
    render itemList as JSON
}

もう1つは、idフィールドを非表示に設定していないことです。最初に正確なIDを取得していることを確認していたため、htmlの2番目の入力項目のテキストの代わりにtype = hiddenを置くだけで非表示にできます

ありがとう！

2
Aadil Masavir

これは、非表示フィールドを使用せずに実行できます。実行時にカスタム属性を作成するには、JQueryの機能を利用する必要があります。

('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input
});
2
Waris Ali

Jqueryを使用したオートコンプリートテキストボックスバインディング

  ## HTML Code For Text Box and For Handling UserID use Hidden value ##
  <div class="ui-widget">
@Html.TextBox("userName")  
    @Html.Hidden("userId")
    </div>

以下のライブラリが必要です

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Jqueryスクリプト

$("#userName").autocomplete(
{

    source: function (request,responce)
    {
        debugger
        var Name = $("#userName").val();

        $.ajax({
            url: "/Dashboard/UserNames",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                Name: Name

            }),
            dataType: 'json',
            success: function (data) {
                debugger
                responce(data);
            },
            error: function (err) {
                alert(err);
            }
        });
    },
    select: function (event, ui) {

        $("#userName").val(ui.item.label); // display the selected text
        $("#userId").val(ui.item.value); // save selected id to hidden input
        return false;
    }
})

データを返す必要があります形式

 label = u.person_full_name,
 value = u.user_id
1
Hari Lakkakula

ラベルテキストを使用したテキストボックスに（値またはID）を表示する上記のコードを試しました。その後、私はevent.preventDefault（）を試してみましたが、完全に機能しています...

var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}]

$(".jquery-autocomplete").autocomplete({
    source: e,select: function( event, ui ) {
        event.preventDefault();
        $('.jquery-autocomplete').val(ui.item.label);
        console.log(ui.item.label);
        console.log(ui.item.value);
    }
});
1
HIR