71

わかりました、ここで何か単純な設定が間違っていると確信していますが、それが 100% ではありません。

そのため、ユーザーがデータベースを検索して結果を選択する方法として、Select2 AJAX メソッドを使用しようとしています。通話自体は結果とともに戻ってきますが、リストから回答を選択することはできません。また、ホバーまたは上下矢印で「選択」できないようです。それで、これ以上苦労することなく、ここに私のコードがあります：

index.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="select2/select2.css" media="screen" />
        <script src="select2/select2.js"></script>
        <script src="select.js"></script>
    </head>
    <body>
        <input type="text" style="width: 500px" class="select2">
    </body>
</html>

select.js

jQuery(function() {

  var formatSelection = function(bond) {
    console.log(bond)
    return bond.name
  }

  var formatResult = function(bond) {
    return '<div class="select2-user-result">' + bond.name + '</div>'
  }

  var initSelection = function(elem, cb) {
    console.log(elem)
    return elem
  }

    $('.select2').select2({
      placeholder: "Policy Name",
      minimumInputLength: 3,
      multiple: false,
      quietMillis: 100,
      ajax: {
        url: "http://localhost:3000/search",
        dataType: 'json',
        type: 'POST',
        data: function(term, page) {
          return {
            search: term,
            page: page || 1
          }
        },
        results: function(bond, page) {
          return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}
        }
      },
      formatResult: formatResult,
      formatSelection: formatSelection,
      initSelection: initSelection
    })
})

JSON レスポンス

{
  error: null,
  results: [
    {
      name: 'Some Name',
      _id: 'Some Id'
    },
    {
      name: 'Some Name',
      _id: 'Some Id'
    }
  ]
}

すべてが正しく引き込まれているように見えますが、実際に回答を選択してボックスに入力することはできません。コードのどこかに問題がありますか?

4

7 に答える 7

140

別の回答を見た後、すべての呼び出しで id フィールドも渡す必要があるようです。そうしないと、入力が無効になります。

それを修正したサンプルコード:

$('.select2').select2({
  placeholder: "Policy Name",
  minimumInputLength: 3,
  multiple: false,
  quietMillis: 100,
  id: function(bond){ return bond._id; },
  ajax: {
    url: "http://localhost:3000/search",
    dataType: 'json',
    type: 'POST',
    data: function(term, page) {
      return {
        search: term,
        page: page || 1
      }
    },
    results: function(bond, page) {
      return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}
    }
  },
  formatResult: formatResult,
  formatSelection: formatSelection,
  initSelection: initSelection
})

編集

これは支持を得続けているので、少し詳しく説明します。.select2() メソッドは、idすべての結果で一意のフィールドを想定しています。ありがたいことに、回避策があります。このidオプションは、次のような関数を受け入れます。

function( <INDIVIDUAL_RESULT> ) {
  // Expects you to return a unique identifier.
  // Ideally this should be from the results of the $.ajax() call. 
}

私の一意の識別子は だったので、<RESULT>._id単純にreturn <RESULT>._id;

于 2013-02-11T20:37:05.083 に答える
13

問題は、JSON データには「id」というプロパティが必要なことです。の必要はありません

id: function(bond){ return bond._id; }

データ自体に ID がない場合は、次のように processResultsの関数を使用して追加できます。

        $(YOUR FIELD).select2({
            placeholder: "Start typing...",
            ajax: {
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "YOUR API ENDPOINT",
                dataType: 'json',
                data: 
                    function (params) {
                        return JSON.stringify({ username: params.term });
                },
                processResults: function (data, page) {

                    var results = [];

                    $.each(JSON.parse(data.d), function (i, v) {
                        var o = {};
                        o.id = v.key;
                        o.name = v.displayName;
                        o.value = v.key;
                        results.push(o);
                    })

                    return {
                        results: results
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup;},
            minimumInputLength: 1,
            templateResult: function (people) {
                if (people.loading)
                    return people.text;

                var markup = '<option value="' + people.value + '">' + people.name + '</option>';

                return markup;
            },
            templateSelection: function (people) { return people.value || people.text }

        });
于 2015-07-23T19:05:26.337 に答える
6

ケースにも気をつけてください。私は使用してIdいましたが、select2は期待していidます。誰かの時間を節約できます。

于 2015-03-10T15:37:06.570 に答える
0

私は何らかの形で動作しないにバインドselect2していた ので、誰かを助けるかもしれません。divajax as dataSource

<div id="testSelect2"> </div>

これをに変更しました

<select id="testSelect2"> </select>

そして、選択したアイテムを保持し始めました。

于 2021-01-06T10:28:19.400 に答える