title: ASP.NET MVC5 Select2 not working
body: <p>This is my first message in this forum, thanks in advance for your help and sorry if I make a bigger mistake here.</p>
  
  <p>I'm trying to implement a select2 JQuery autocomplete combobox.</p>
  
  <p>I copy some code and I can't see where is my mistake, but the edit text looks like a normal Edit text instead change as a Select2, the JavaScrypt is not working for some reason.</p>
  
  <p>Here is my code:</p>
  
  <p>The references in my indexcshtml:</p>
  
  <pre><code>&lt;link href="~/Content/css/select2.css" type="text/css" rel="stylesheet" /&gt;
  &lt;script src="~/Scripts/jquery-3.1.0.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/select2.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.validate.unobtrusive.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>my textbox who should be converted in a Combobox like cyndarela !</p>
  
  <pre><code>@using (Html.BeginForm())
  {
  
      @Html.TextBoxFor(a =&gt; a.SupplierId, new { id = "supplier" })  @Html.ValidationMessageFor(a =&gt; a.SupplierId)
      &lt;br /&gt;
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
  }
  </code></pre>
  
  <p>and at the end my JavaScrypt:</p>
  
  <pre><code>&lt;script &gt;
  
  
  
   $(document).ready(function () {
  
         var pageSize = 20;
  
         var optionListUrl = '@Url.Action("GetProducts", "Purchases")';
  
      //Method which is to be called for populating options in dropdown //dynamically
  
         $('#supplier').select2(
  
         {
  
             ajax: {
  
                 delay: 150,
  
                 url: optionListUrl,
                 //url: '/Purchases/GetProducts',
  
                 dataType: 'json',
  
  
  
                 data: function (params) {
  
                     params.page = params.page || 1;
  
                     return {
  
                         searchTerm: params.term,
  
                         pageSize: pageSize,
  
                         pageNumber: params.page
  
                     };
  
                 },
  
                 processResults: function (data, params) {
  
                     params.page = params.page || 1;
  
                    return {
  
                         results: data.Results,
  
                         pagination: {
  
                             more: (params.page * pageSize) &lt; data.Total
  
                         }
  
                     };
  
                 }
  
             },
  
             placeholder: "-- Select --",
  
             minimumInputLength: 0,
  
             allowClear: true,
  
     });
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>is like #supplier is not working in the script</p>
  
  <p>Thanks for your time guys ! </p>