ASP.NET MVC5 Select2 not working

Question

This is my first message in this forum, thanks in advance for your help and sorry if I make a bigger mistake here.

I'm trying to implement a select2 JQuery autocomplete combobox.

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.

Here is my code:

The references in my indexcshtml:

<link href="~/Content/css/select2.css" type="text/css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.0.js"></script>
<script src="~/Scripts/select2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

my textbox who should be converted in a Combobox like cyndarela !

@using (Html.BeginForm())
{

    @Html.TextBoxFor(a => a.SupplierId, new { id = "supplier" })  @Html.ValidationMessageFor(a => a.SupplierId)
    <br />
    <button type="submit">Submit</button>
}

and at the end my JavaScrypt:

<script >



 $(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) < data.Total

                       }

                   };

               }

           },

           placeholder: "-- Select --",

           minimumInputLength: 0,

           allowClear: true,

   });

});

</script>

is like #supplier is not working in the script

Thanks for your time guys !

Answer 1

I had the same issue. The instruction

@Scripts.Render("~/bundles/scripts")

In your layout view includes all your scripts and they sometimes have some instructions that dispose the .send2()

So you can delete that line and just import the scripts .js files that you need including select2.