title: Jquery MultiSelect List for more than 5 thousand records
body: <p>I'm using the jquery multiselect, but now I'm facing some problems. There are moments that I need to display more than 5 thousand records and for IE8 it is not working out. This is what the component looks like?</p>
  
  <p><img src="https://i.stack.imgur.com/hp0lh.jpg" alt="enter image description here"></p>
  
  <p>Here is how I configure the multiselect:</p>
  
  <pre><code>@Html.ListBoxFor(m =&gt; m.MateriaisSelecionados, new MultiSelectList(ViewBag.Materiais, "Id", "Codigo"))
  
  if ($('#MateriaisSelecionados').length) {
      //* custom headers
      $('#MateriaisSelecionados').multiSelect({
          selectableHeader: "&lt;div class='custom-header'&gt;Materiais&lt;/div&gt;",
          selectionHeader: "&lt;div class='custom-header'&gt;Materiais Ativos&lt;/div&gt;"
      });
  }
  </code></pre>
  
  <p>When I open de screen on IE8 I'm getting this message:</p>
  
  <pre><code>localhost is not responding due to a long-running script
  </code></pre>
  
  <p>And it takes more than 5 minutes to load all the records.
  I thought I could use a search box for the list and show the items just after the user types something in the search box but I couldn't find a way to do so, or another component that could work well.</p>
  
  <p>If I just show the first 500 records I works fine, but I do need to show all of them for the user (because he will select what will be active on the application for another CRUDS).</p>
  
  <p>Any idea guys?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Well, I found a solution and now it is working. I chose to create it manually, so I created 2 ListBoxes on the View and as the user selects the items in the "all items" list I use jquery to transfer those items to the other ListBox. I also added a search box and always show maximum 300 item in the "all items" list.
  This is my code now:</p>
  
  <pre><code>//All items
  @Html.ListBoxFor(m =&gt; m.Materiais, new MultiSelectList(ViewBag.Materiais, "Id", "TextoBreve"), new { @class = "form-control select-list", @multiple = "multiple" })
  
  //Selected items
  @Html.ListBoxFor(m =&gt; m.MateriaisSelecionados, new MultiSelectList(ViewBag.MateriaisAtivos, "Id", "TextoBreve"), new { @class = "form-control select-list", @multiple = "multiple" })
  
  $("#Materiais").change(function (e) {
      $("#Materiais option:selected").each(function () {
          $(this).appendTo("#MateriaisSelecionados");
      });
  
      var selectList = $('#MateriaisSelecionados option');
      selectList.sort(NASort);
      $('#MateriaisSelecionados').html(selectList);
  
      return false;
  });
  
  $("#MateriaisSelecionados").change(function (e) {
      $("#MateriaisSelecionados option:selected").each(function () {
          $(this).appendTo("#Materiais");
      });
  
      var selectList = $('#Materiais option');
      selectList.sort(NASort);
      $('#Materiais').html(selectList);
  
      //Filters the items for the first list
      FiltrarMateriais();
  
      return false;
  });
  
  function NASort(a, b) {
  if (a.innerHTML == 'NA') {
      return 1;
  }
  else if (b.innerHTML == 'NA') {
      return -1;
  }
  return (a.innerHTML &gt; b.innerHTML) ? 1 : -1;
  };
  </code></pre>
  
  <p>Thank you guys for your ideas!</p>