Allow typing inside a Dropdownlist and run the search

Question

I have a DroDownList that lists Patients' names. I need to allow the user to type the patient’s "Name" directly into the Dropdownlist and when typing the Patient Name the system will perform the search.

HTML

<p><button type="button" id="btnNovoProduto" class="btn btn-primary btn-sm">NOVO PRODUTO</button></p>

<div class="modal fade" id="modalProduto" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
                <div class="modal-header bg-info">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3>PRODUTO</h3>
                </div>
                <div class="modal-body">
                       <fieldset>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="col-md-8">
                                        <select id="ddlJquery" class="form-control input-sm">
                                            <option value="0">SELECIONE</option>
                                        </select>

                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="col-md-8">
                                        <input type="text" id="NomeDoPaciente" value="" class="form-group-sm" />
                                    </div>
                                </div>
                            </div>
                       </fieldset>

Javascript

@section Scripts {
    <script src="~/Scripts/select2.full.min.js"></script>    
    <script type="text/javascript">

        $(document).ready(function () {

            $('#btnNovoProduto').on('click', function () {
                ListarJQUERY();
                $("#modalProduto").modal({ backdrop: false });
            });

            function ListarJQUERY() {
                $.ajax({
                    url: "/Administrativo/Produto/BuscarAllProduto",
                    type: "post",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    processData: false,
                    data: null,
                    beforeSend: function () {
                        $("#divCarregando").show();
                    },
                    complete: function () {
                        $("#divCarregando").hide();
                    },
                    success: function (data) {
                        $('#ddlJquery').empty();
                        $('#ddlJquery').append('<option value="0">SELECIONE</option>');

                        $.each(data.lstSubTipo, function (i, subTipo) {
                            $('#ddlJquery').append('<option value=' + subTipo.TBPRODUTOID + '>' + subTipo.DSPRODUTO + '</option>');
                        });
                    },
                    error: function (result) {
                        alert(result.responseText);
                    }
                });

                $("#ddlJquery").select2({
                    allowClear: true,
                    ajax: {
                        type: 'GET',
                        url: '/Produto/BuscarParteProduto',
                        data: function (params) {
                            return {
                                id: 'e'//params.term
                            };
                        },
                        dataType: 'json',
                        processResults: function (data) {
                            return {
                                results: data
                            };
                        }
                    },
                    initSelection: function (element, callback) {
                        var id = $(element).val();
                        if (id) {
                            var url = '/Produto/BuscarParteProduto';
                            $.ajax(url + '/' + id, {
                                dataType: "json"
                            }).done(function (data) {
                                callback({ 'pNome': id, 'text': $('#NomeDoPaciente').val() })
                            });
                            console.log("passei");
                        } else {
                            callback({ 'pNome': $('#NomeDoPaciente').val(), 'text': $('#NomeDoPaciente').val() })
                        }
                    }
                });
            };


        });
    </script>
}

CONTROLER

public JsonResult BuscarParteProduto(string pNome)
        {
            try
            {
                List<TBProduto> lProdutoFiltrado = new List<TBProduto>();
                List<TBProduto> lTotalProduto = ObterListaProduto();
                if (!string.IsNullOrWhiteSpace(pNome))
                {

                    lProdutoFiltrado = lTotalProduto.Where(x => x.DSPRODUTO.ToUpper().Contains(pNome.ToUpper())).ToList<TBProduto>();
                }
                else
                {
                    lProdutoFiltrado = lTotalProduto.ToList();
                }
                return Json(lProdutoFiltrado.Select(x => new
            {
                id = x.TBPRODUTOID,
                text = String.IsNullOrWhiteSpace(x.DSPRODUTO) ? "" : x.DSPRODUTO,
            }), JsonRequestBehavior.AllowGet);
            }catch(Exception){
                throw;
            }
        }

public JsonResult BuscarAllProduto()
        {
            try
            {
                List<TBProduto> lTotalProduto = ObterListaProduto();
                List<TBProduto> lProdutoFiltrado = new List<TBProduto>();
                lProdutoFiltrado = lTotalProduto.ToList();
                return Json(new { lstSubTipo = lProdutoFiltrado.ToList() }, JsonRequestBehavior.AllowGet);
            }
            catch (Exception)
            {
                throw;
            }
        }

Answer 1

Follow a statement from Select2. Don’t forget to create a new method in Patientecontroller called jsonLoadSelect2.

Statement:

    $("#ddlPacientes").select2({
        allowClear: true,
        ajax: {
            type: 'GET',
            url: '@Url.Action("jsonLoadSelect2", "Paciente")',
            data: function (params) {
                return {
                    id: params.term
                };
            },
            dataType: 'json',
            processResults: function (data) {
                return {
                    results: data
                };
            }
        },
        initSelection: function (element, callback) {
            var id = $(element).val();
            if (id) {
                var url = '@Url.Action("jsonLoadSelect2", "Paciente")';
                $.ajax(url + '/' + id, {
                    dataType: "json"
                }).done(function (data) {
                    callback({ 'id': id, 'text': $('#NomeDoPaciente').val() })
                });
                console.log("passei");
            } else {
                callback({ 'id': $('#NomeDoPaciente').val(), 'text': $('#NomeDoPaciente').val() })
            }
        }
    });

jsonLoadSelect2 method in the Patientcontroller:

public JsonResult jsonLoadSelect2(String id)
{
        IList<Paciente> pacientes;

        if (!String.IsNullOrWhiteSpace(id))
        {
            id = id.ToUpper();
            certificados = _paciente.GetByFilter(c => c.NomeDoPaciente.ToUpper().Contains(id.ToUpper()));
        }
        else
        {
            pacientes = _paciente.FindAll();
        }

        return Json(pacientes.Select(x => new
        {
            id = x.ID,
            text = String.IsNullOrWhiteSpace(x.NomeDoPaciente) ? "" : x.NomeDoPaciente,
        }), JsonRequestBehavior.AllowGet);

}

Should help in its implementation.