20

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

手がかりを見つけたいです。私はこのプラグインを初めて使用し、例を見るのに 1 日を費やしました。

4

6 に答える 6

32

selectselect2 は、標準フォーム コントロールにアタッチされている場合、AJAX を実行しません。inputAJAX 経由でロードするには、非表示のコントロールにアタッチする必要があります。

更新: これは Select2 4.0 で修正されました。プレリリースノートから：

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

また、サンプル セクションの機能でも確認できます。

于 2013-05-02T18:37:08.673 に答える
5

コードを試してみましたが、うまくいきました。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>
于 2013-04-24T15:49:22.053 に答える