CODEWITHSUNDEEP
asp.net-mvc-3jquery-ui
Ryan
Ryan

Reputation: 672

jquery autocomplete using mvc3 dropdownlist

I am using ASP.NET MVC3 with EF Code First. I have not worked previously with jQuery. I would like to add autocomplete capability to a dropdownlist that is bound to my model. The dropdownlist stores the ID, and displays the value.

So, how do I wire up the jQuery UI auto complete widget to display the value as the user is typing but store the ID?

I will need multiple auto complete dropdowns in one view too.

I saw this plugin: http://harvesthq.github.com/chosen/ but I am not sure I want to add more "stuff" to my project. Is there a way to do this with jQuery UI?

Upvotes: 4

Views: 8033

Answers (3)

Ryan
Ryan

Reputation: 672

This is what I did FWIW.

$(document).ready(function () {
    $('#CustomerByName').autocomplete(
    {
        source: function (request, response) {
            $.ajax(
            {
                url: "/Cases/FindByName", type: "GET", dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.CustomerName,
                            value: item.CustomerName,
                            id: item.CustomerID
                        }
                    })
                    );
                },

            });
        },
        select: function (event, ui) {
                    $('#CustomerID').val(ui.item.id);
                },
        minLength: 1
    });

});

Works great!

Upvotes: 0

CD Smith
CD Smith

Reputation: 6607

Update

I just posted a sample project showcasing the jQueryUI autocomplete on a textbox at GitHub https://github.com/alfalfastrange/jQueryAutocompleteSample

I use it with regular MVC TextBox like

@Html.TextBoxFor(model => model.MainBranch, new {id = "SearchField", @class = "ui-widget TextField_220" })

Here's a clip of my Ajax call

It initially checks its internal cached for the item being searched for, if not found it fires off the Ajax request to my controller action to retrieve matching records

$("#SearchField").autocomplete({
    source: function (request, response) {
        var term = request.term;
        if (term in entityCache) {
            response(entityCache[term]);
            return;
        }
        if (entitiesXhr != null) {
            entitiesXhr.abort();
        }
        $.ajax({
            url: actionUrl,
            data: request,
            type: "GET",
            contentType: "application/json; charset=utf-8",
            timeout: 10000,
            dataType: "json",
            success: function (data) {
                entityCache[term] = term;
                response($.map(data, function (item) {
                    return { label: item.SchoolName, value: item.EntityName, id: item.EntityID, code: item.EntityCode };
                }));
            }
        });
    },
    minLength: 3,
    select: function (event, result) {
        var id = result.item.id;
        var code = result.item.code;
        getEntityXhr(id, code);
    }
});

This isn't all the code but you should be able to see here how the cache is search, and then the Ajax call is made, and then what is done with the response. I have a select section so I can do something with the selected value

Upvotes: 4

Mickey
Mickey

Reputation: 3

I have seen this issue many times. You can see some of my code that works this out at cascading dropdown loses select items after post

also this link maybe helpful - http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspx

Upvotes: -1

Related Questions