Jquery UI Autocomplete with MVC 4

Question

I am using the jquery ui autocomplete in MVC 4 with Razor HTML. I am able to use it ok with hard coded values but I was wondering how I can connect it to the database so the the values coming up don't have to be hard coded.

Please rephrase your question. Now you ask, how do I program, this is not doable in any scenario. You could try nerddinnerbook.s3.amazonaws.com/Intro.htm for more info. — Patrick
– Patrick, Commented Mar 24, 2013 at 22:57
I'm pretty sure that autocomplete takes a url parameter. If you point this at a server that returns a list, then you are good to go. docs — Davin Tryon
– Davin Tryon, Commented Mar 24, 2013 at 22:57

Davin Tryon · Accepted Answer · 2013-03-24 23:03:14Z

2

If you are using MVC4, then you should have an action created that you can access from the view (render the action url). Then, you need to set this (url) as the source when setting up the autocomplete jquery.

The documentation for a remote source is here.

For MVC, it would look something like this:

$( "#birds" ).autocomplete({
      source: "/MyController/OptionsAction",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });

answered Mar 24, 2013 at 23:03

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CodeBon · Accepted Answer · 2014-12-26 12:27:12Z

Its better to use MVC's @URL.Action to ensure the URL is encoded correctly even if your view is one or ten folders deep.

In the above example "/MyController/OptionsAction", would not work if you moved your view one folder down where as @URL.Action would continue to work.

Note the format of the ajax call is like this:

Sending data:

url (where you are posting to)

data (the data you are posting)

type (the type of request being made: POST or GET or PUT. Default if left blank is GET)

contentType (content type to use when sending data to the server. Better not to change unless necessary)

Receiving data:

dateType (the datatype you are expecting back: in this case json)

success (function called if the request succeeds)

        $('#Country').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetCountries", "User")',
                data: "{ 'CountrySearch': '" + $('#Country').val() + "' }",
                dataType: "json",
                type: "POST",
                contentType: 'application/json',
                success: function (data) {
                    response($.map(data, function (item) {
                        return JSON.parse(item);
                    }))
                },
                error: function (jqXhr, textStatus, errorThrown) { alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')"); },
            })
        },
        minLength: 1,
    });

Where countries returns data from a database call like this:

{ "Countries":"["Australia", "Austria", "Canada", "United States"]" }

    public JsonResult GetCountries(string CountrySearch)
    {
        string[] Countries = new AddressManager().GetCountries(CountrySearch);
        string serialisedList = new JavaScriptSerializer().Serialize(Countries);
        return new JsonResult { Data = new { Countries = serialisedList }, ContentEncoding = Encoding.UTF8, ContentType = "text/plain", JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

Collectives™ on Stack Overflow

Jquery UI Autocomplete with MVC 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related