Question

I am trying to implement an autocomplete in ASP.NET MVC 3, following this post
but I really can’t get it to work. I have looked at a series of other posts and blogs, but no success so far.

I have a DB table which contains regions (in Japanese), like so:

1 ハイチ; 2 ドミニカ共和国; 3 南アフリカ

basically a [key, Name] pair.

In my repository I am doing the following call:

public IQueryable<Region> GetAllRegions()
    {
        return db.Regions;
    }

Getting the raw data, which I pass to the controller, pair down the data according to input and the concatenate to a string like so:

    public class RegionsController : Controller
{
    Region_Repository rr = new Region_Repository();

    public string FindRegions(string q)
    {
        List<string> regions = rr.GetAllRegions().Select(r => r.Name).Where(s => s.StartsWith(q)).ToList();

        return string.Join("\n", regions);
    }

}

The controller when accessed via server/Regions/FindRegions/?q=ハ return a page with the single entry "ハイチ" as expected.

On the page I have a textbox with id "#NewRegion" and the script

<script type="text/javascript">
$(document).ready(function () {
    $("#NewRegion").autocomplete('@Url.Action("FindRegions", "Regions")');
})
</script>

which I placed underneath the textbox.

I have references to JQuery and JQueryUI from Google API which work since I am executing other JQuery and using the JQueryUI datepicker successfully on this page.

I tried placing the script in a separate file and hardcoding the url as ‘/Regions/FindRegions’, but no change. I had a look in firebug (second day only, so not very proficient at using it yet) and the script doesn’t seem to get executed.
The controller is called fine when accessed via URL, but anything I enter into the textbox does not get passed to the controller…

Can anybody see anything wrong with this?

Answer 1

According to the dark depths of the jQuery UI documentation, the parameter used when passing the autocomplete string to the server is called term, not q.

Update: And also, initialize with autocomplete({source: "@(...url...)"}).

Update 2: And also, return the type of data the Autocomplete widget expects, a JSON array of strings or a JSON array of objects.