Select2遠隔データ検索一度すべてのデータを取得

Question

select2は私が望むようにほとんど動作しています。別のフィールドが変更されたときに、すべてのリモートデータをロードしてフォーマットします。検索したデータに検索機能を追加したい、つまりデータを取得したら、タイトル（result.title）でリストを検索することができます。

以下の例では、データは取得されますが、検索語はフィルタリングされていません。ユーザーが結果を検索する前に、すべてのリモートデータを最初にロードすることが重要です。

検索機能を追加できない場合、検索ボックスを無効にするにはどうすればよいですか？ "minimumResultsForSearch：-1"を設定しても、select2ボックスで検索できますか？

var $company2 = $(".company2"); 
    $company2.select2().on('change', function() { 
     if ($company2.val() !== null) { 
      $('.unmaintained2').select2({ 
       allowClear: true, 
       minimumResultsForSearch: 1, 
       ajax: { 
        url: "/api/unmaintained2/" + $company2.val(), 
        processResults: function (data) { 
         return { 
          results: data, 
         }; 
        }, 
        dataType: 'json', 
        cache: true, 
       }, 
       escapeMarkup: function(m) { 
        return m; 
       }, 
       templateResult: function (result) { 
        if (result.loading) return 'Loading...'; 
        return result.text + '<h6>' + result.make + ' ' + result.category + '</h6>'; 
       }, 
      }); 
     }; 
    }); 

Answer 1

以下の@dns_nxのおかげで、最終的な解決策が得られました。 select2はリモートデータで検索可能（クライアント側）およびテンプレート可能です。

$(document).ready(function() { 
    var $company2 = $(".company2"); 
    var $equipment2 = $(".equipment2"); 
    $company2.select2().on('change', function() { 
     $equipment2.empty(); 
     if ($company2.val() !== null) { 
      $.ajax({ 
       url: "{{ url('/') }}" + "/api/unmaintained2/" + $company2.val(), 
       type: 'GET', 
       dataType: 'json', 
       async: true, 
       success: function(data) { 
        $equipment2.select2({ 
         data: data, 
         templateSelection: function(result) { 
          return result.text; 
         }, 
         templateResult: function(result) { 
          if (!result.id) { 
           return result.text; 
          } 
          var final = '<h2>'+ result.serial + '</h2><h5>(' + result.make + ') ' + result.category + '</h5>'; 
          return final; 
         }, 
         escapeMarkup: function(result) { 
          return result; 
         }, 
        }); 
       } 
      }); 
     } 
    }).trigger('change'); 
}); 

Answer 2

matcher呼ば検索するためのオプションがあります。あなただけのローカル供給されたデータを使用することができますドキュメント

https://select2.org/searching#customizing-how-results-are-matched

しかし、これを参照してください。

リモートデータを使用している場合は、select2は、データがすでにフィルタリングされて返されていると見なします。

マッチャーは配列のみを経由してローカルに供給されたデータ（例えば、で動作します！リモートデータセットを使用する場合 、Selectセレクトが返さ 結果が既にサーバ側でフィルタリングされていることを期待しています。

だから私は、あなたがajaxオプションでこの方法を使用することはできませんだと思う。

ページがロードされたときにたぶん、あなたはデータをロードすることができ、その後、選択ボックスにoption sと返されたデータを追加します。次にselect2をinitiliaze matcherオプションを使用してください。

UPDATE：

私は少し周りをプレイしてきた、あなたはすべてのオプションをロードした後、検索結果をフォーマットすることができます。

function formatState (state) { 
    if (!state.id) { 
    return state.text; 
    } 
    var state1 = state.text + '<h6>(' + state.id + ') ' + state.text + '</h6>'; 
    return state1; 
}; 

function selection(state) { 
    return state.text; 
} 

function makeSelect2(data) { 
    $('#selectBox').select2({ 
     data: data, 
     templateSelection: selection, 
     templateResult: formatState, 
     escapeMarkup: function (state) { 
      return state; 
     }, 
    }); 
} 

$(document).ready(function() { 
    $.ajax({ 
     type: "POST", 
     dataType: "json", 
     async: true, 
     url: "ajax.php", 
     data: ({ 
     }), 
     success: function (data) { 
      makeSelect2(data); 
     } 
    }); 
}); 

$(document).readyのオプションがajaxによってロードされています このコードをチェックしてください。 ajaxの結果が成功した後、makeSelect2関数が呼び出され、ajaxリクエストの結果が返されます。 makeSelect2機能では、select2ボックスは指定されたデータで初期化され、templateSelectionとtemplateResultオプションを使用すると、検索結果の外観を変更できます。

あなたの期待通りです。