Autocomplete the search after entering 3 characters on a dropdownlist

Question

I have a dropdownlist in which I have to autocomplete the search after I register 3 characters on the search bar. What I was thinking is to register every time I enter a character on the search bar, but I can't get the characters that I am putting on the search bar, so I don't know how to make that, because I have more than 1 million of items on the dropdownlist so I want to search once 3 characters are entered, so I can make the search more bounded. I'm working with MVC with c#, razor, js and chosen plugin. (I'm a Spanish speaker and my English is a work in progress)

@Html.DropDownListFor(x => x.IdPersona, Enumerable.Empty<SelectListItem>(), "Seleccione...", new { @class = "form-control chosen-select", style = "width:100%", id = "nombrepersona"})

$('#nombrepersona_chosen').on("keyup", function () {
        inputText = $(this).val();
        console.log($(this).value);
        console.log("a");
        if (inputText.length >= 3) {
            // Realizar la búsqueda aquí
            console.log(inputText+"entro");
            RealizarBusqueda(inputText);
        }
 });

Answer 1

you can use this script to start search after 3 character keyed in.

$("#searchInput").keyup(function () {
    var searchTerm = $(this).val();
    if (searchTerm.length >= 3) {
        $.ajax({
            url: "@Url.Action("AutocompleteSearch", "Home")",
            type: "GET",
            data: { searchTerm: searchTerm },
            success: function (data) {
                var dropdown = $("#searchResultsDropdown");
                dropdown.empty();
                if (data.length > 0) {
                    $.each(data, function (index, item) {
                        dropdown.append($('<option></option>').val(item.Id).text(item.Name));
                    });
                } else {
                    dropdown.append($('<option></option>').text("No results found"));
                }
            }
        });
    }
});

});

You can refer to this post for complete solution. : Autocomplete with MVC c#

Answer 2

Based on your scenario and descriotion, you can use selectpicker that has attribute data_live_search which need to set true. using this approach you don't need to do any additional hassle.

You could refer to following demo:

Demo Controller:

public class SelectListSearchController : Controller
    {
        public IActionResult Index()
        {
            List<SelectListItem> entityTypeList = new List<SelectListItem>();
            entityTypeList.Add(new SelectListItem { Text = "Client-A", Value = "Client-A" });
            entityTypeList.Add(new SelectListItem { Text = "Client-B", Value = "Client-B" });
            entityTypeList.Add(new SelectListItem { Text = "Client-C", Value = "Client-C" });
            entityTypeList.Add(new SelectListItem { Text = "Client-D", Value = "Client-D" });
            entityTypeList.Add(new SelectListItem { Text = "Client-E", Value = "Client-E" });
            entityTypeList.Add(new SelectListItem { Text = "Client-F", Value = "Client-F" });
            entityTypeList.Add(new SelectListItem { Text = "Client-G", Value = "Client-G" });
            ViewBag.ListCategories = entityTypeList;
            return View();
        }
    }

View:

@Html.DropDownList("Category", ViewBag.ListCategories, null, new { @class = "selectpicker", data_live_search = "true"})



@section scripts {
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
    <script>
       
    </script>
}

Ouput:

Note: You can set any extra condition if you want.