Use SearchController on snippet chooser modal

client/src/entrypoints/snippets/snippet-chooser-modal.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import { SearchController } from '../../includes/chooserModal';
 
 window.SNIPPET_CHOOSER_MODAL_ONLOAD_HANDLERS = {
   choose: function (modal) {
@@ -9,49 +10,20 @@ window.SNIPPET_CHOOSER_MODAL_ONLOAD_HANDLERS = {
       });
 
       $('.pagination a', context).on('click', function () {
-        loadResults(this.href);
+        searchController.fetchResults(this.href);
         return false;
       });
     }
 
-    var searchForm$ = $('form.snippet-search', modal.body);
-    var searchUrl = searchForm$.attr('action');
-    var request;
-
-    function search() {
-      loadResults(searchUrl, searchForm$.serialize());
-      return false;
-    }
-
-    function loadResults(url, data) {
-      var opts = {
-        url: url,
-        success: function (resultsData, status) {
-          request = null;
-          $('#search-results').html(resultsData);
-          ajaxifyLinks($('#search-results'));
-        },
-        error: function () {
-          request = null;
-        },
-      };
-      if (data) {
-        opts.data = data;
-      }
-      request = $.ajax(opts);
-    }
-
-    $('form.snippet-search', modal.body).on('submit', search);
-    $('#snippet-chooser-locale', modal.body).on('change', search);
-
-    $('#id_q').on('input', function () {
-      if (request) {
-        request.abort();
-      }
-      clearTimeout($.data(this, 'timer'));
-      var wait = setTimeout(search, 200);
-      $(this).data('timer', wait);
+    const searchController = new SearchController({
+      form: $('form.snippet-search', modal.body),
+      resultsContainerSelector: '#search-results',
+      onLoadResults: (context) => {
+        ajaxifyLinks(context);
+      },
     });
+    searchController.attachSearchInput('#id_q');
+    searchController.attachSearchFilter('#snippet-chooser-locale');
 
     ajaxifyLinks(modal.body);
   },