web-dev-qa-db-ja.com

jquery select2-動作していません

Select2プラグイン（ivaynberg.github.io/select2）を使用しています。ドロップダウン（選択）を表示しようとしています。 data.phpのすべてのアイテムをオプションとして取得しています。ただし、select2はオートコンプリートプラグインであり、クライアントが入力した検索語を検索し、一致する結果のみを表示する必要があります。現時点では、すべてのアイテムを表示しており、検索結果を取得していません。私の言語でごめんなさい

data.phpはこれをエコーアウトしています：

[{
    "id": "1",
    "text": "item1",
    "exercise": "blah text"
  }, {
    "id": "2",
    "text": "item2"
  }
]

コードは次のとおりです。

$(document).ready(function () {
    $('#thisid').select2({
        minimumInputLength: 2,
        ajax: {
            url: "data.php",
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                  };
            },
            results: function (data, page) {
                return {
                    results: data
                };
            }
        }
    });
});

入力は次のとおりです。

<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />

手がかりを見つけたい、私はこのプラグインに非常に新しく、例を見るために一日を費やしました。

jqueryajaxjquery-select2
20
user2315153

select2はAJAX標準のselectフォームコントロールにアタッチされている場合。非表示のinputにアタッチする必要があります。 AJAXを介してロードするコントロール

Update：これはSelect2 4.0で修正されました。 リリース前のメモ から：

すべてのデータアダプターの標準<select>要素との一貫性により、非表示の<input>要素の必要性がなくなります。

また、 例のセクション の関数で見ることもできます。

31
GGregson

User2315153は複数のリモート値を受け取りたいと思い、<select>要素へのajax呼び出しでselect2（）を誤って割り当てています。

リモート値を取得する正しい方法は、通常の<input>要素を使用することです。複数の値が必要な場合は、メソッド呼び出しで「複数の」パラメーターに通知します。例：

<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
<script>
$('#thisid').select2({
        minimumInputLength: 2,
        multiple: true,
        ajax: {
              ...

<select>要素はリモート値には使用できません

UPDATE：select2 4.0.0以降、非表示の入力は非推奨になりました：

https://select2.github.io/announcements-4.0.html#hidden-input

つまり、select2プラグインのattribへの入力を使用する代わりに、SELECTタグを使用します。

注意：サーバーからjsonの任意の形式を使用するのは簡単です。それを行うには、単に「processResults」を使用します。

例：

<select id='thisid' class='select2-input select2'></select>
<script>
        $("#thisid").select2({
            multiple: true,
            closeOnSelect: true,

            ajax: { 
                url: "myurl",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                      q: params.term,
                      page: params.page
                    };
                  },
                processResults: function (data, page) { //json parse
                    console.log("processing results");
                    //Transform your json here, maybe using $.map jquery method
                    return { 
                       results: yourTransformedJson
                    };
                },
                cache: (maybe)true
            }
        });
</script>
9
Marcelo Amorim

私はコードを試してみました、それはうまくいきます。 jqueryフレームワークを含めたり、jsとcssのパスを確認したりしないと思います。

<!DOCTYPE html>
<html>
<head>
    <link href="select2.css" rel="stylesheet"/>
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <script src="select2.min.js"></script>
    <script>
        $(document).ready(function() { 
            $('#thisid').select2({
                minimumInputLength: 2,
        ajax: {
            url: "data.php",
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                  };
            },
            results: function (data, page) {
                return {
                    results: data
                };
            }
        }
    });

        });
    </script>
</head>
<body>
    <input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />

</body>
</html>
5
Tamil Selvan C

非表示の入力要素を使用する必要はないと思います。試して、ajax呼び出しからプレーンHTMLデータを取得して設定し、select2リセットメソッドを初期化することができます。コードスニペットはこちら

[〜＃〜] html [〜＃〜]

<select id="select" name="select" class="select2">
        <option value="" selected disabled>Please Select Above Field</option>
</select>

Javascript

    $.ajax({
        type: "POST",
        cache:false,
        url: YOUR_AJAX_URL,
        success: function(response)
        {
            $('#select').html(response);
        }
    });
    $('#select').select2("val","");

Ajax応答：

<option value="value">Option Name</option>
.
.
.
<option value="value">Option Name</option>
1
Hardik Thaker

よく読んだ後、select2.js自体を変更することにしました。

2109行目で変更します

this.focusser.attr("id", "s2id_"+this.select.context.id);

入力タグがそうである場合

<select id="fichier">

したがって、リストを検索する入力タグのIDはs2id_fichier_searchになります

私の知る限り、競合はないはずです。これにより、同じページで複数のselect2を使用して、イベント（たとえば、.get、.postなど）を実行できます。

$(function() { 
  $('#s2id_fichier_search').keyup(function() {
    console.log('Be Practical')
  })
}

したがって、これは使用する場合のように実行されます

<select id="fichier" onkeyup="console.log('Be Practical')">
0
Shakir