CODEWITHSUNDEEP
c#jqueryasp.net-mvc
Jason James
Jason James

Reputation: 1092

ASP.NET MVC 5 DropDownListFor AutoComplete

I use a DropDownListFor helper in an ASP.NET MVC Razor view that contains a collection of SelectListItems. The selected item gets posted back to a controller. However, as the list of items grows the DropDownListFor helper will become troublesome to use. I was thinking of using a AutoComplete function so that the user can begin typing the list entry and suggestions will populate the list.

There are examples here that use TextBoxes, but a DropDown seems as though is would work best here.

Does anyone have any ideas on how I'd use jQuery to accomplish my goals or are there any other suggestions?

Upvotes: 0

Views: 5072

Answers (2)

Jason James
Jason James

Reputation: 1092

I the end the easiest (not necessarily the cheapest) was to use a customer control from Telerik.

Thanks for your answers.

Upvotes: 0

Haim Katz
Haim Katz

Reputation: 461

This works for me. It uses the jquery ui. I has to add an api on the website to get the values for the drop down list.

 $(document).ready(function () {
        $("#mytextbox").autocomplete({
            source: function (req, res) {
                $.ajax({
                    url: '/mysite/api/MyController/' + req.term, //+ you can add other filters here,
                    type: "GET",
                    dataType: "json",
                    success: function (data) {

                        res($.map(data, function (item) {
                            return {
                                label: item.MyDisplayLabel,
                                mykey: item.mykey,
                                value: item.myvalue

                            };
                        }));
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(mymessage);
                    }
                });
            },
            minLength: 3,
            delay: 500,
            select: function (event, ui) {
                $("#myhiddentextboxThatacceptsValueOfDropDownBox").val(ui.item.mykey);
            }

        });
    });

Upvotes: 1

Related Questions