dont see an empty text box inside the drop down

Question

I have the following code on my web page. I am trying to use select2 so that user can type in the value inside the drop down.

<div class="card card-primary">

<div class="row">

    <div class="card-body">

        <div class="col-md-12">

            <form asp-action="Create">

              @*  <div asp-validation-summary="ModelOnly" class="text-danger"></div>*@

                <div class="form-group row">

                    <div class="col-sm-4">

                     

                        <select id="ddlType" name="Name" class="form-control" asp-items="ViewBag.Select">

                            <option value="0">--Select Type--</option>

                        </select>

                    </div>

                </div>

                <div class="form-group">

                    <input type="submit" value="Create" class="btn btn-primary" />

                </div>

            </form>

        </div>

    </div>

</div>

</div>

link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<script type="text/javascript">

$(function () {

    debugger;

    $("#ddlType").select2({

      

        tags: true,

        createTag: function (params) {

            return {

                id: params.term,

                text: params.term,

                newOption: true

            }

        },

        templateResult: function (data) {

            var $result = $("<span></span>");

            $result.text(data.text);

            if (data.newOption) {

                $result.append(" <em>(new)</em>");

            }

            return $result;

        }

    });

});

</script>

I don't have the script section because I have this in my layout page

<script src="~/lib/jquery/dist/jquery.min.js"></script>

<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<script src="~/js/site.js" asp-append-version="true"></script>

await RenderSectionAsync("Scripts", required: false)

This is what I have in the controller.

 public async Task<IActionResult> Create()

        {

           List<DocumentType> GetAllDocType =  await _documentTypeService.GetAllDocTypes();

		   SelectList Typo = new SelectList(GetAllDocType.DistinctBy(x=>x.Type), "Id", "Type");

           ViewBag.Select = Typo;

           return View();

        }

Answer 1

you should use the browser debug tools you would see the error. view page source and be sure the script includes are before the inline javascript.