Ajax autocomplete in Entity Framework

Question

I have following HTML code:

<input id="pesquisaEstilo" name="pesquisa" type="text" placeholder="Destrito, Concelho" />
<input type="submit" value="Pesquisar" id="botaoPesquisar"/>

I want to autocomplete the search bar using the Jquery function . autocomplete() with the following code:

$(function () {
$("#pesquisaEstilo").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Home/GetAutoCorrect",
            data: { term: request.term },
            success: function (ficheiro) {
                response($.map(ficheiro, function (item) {
                    return
                    {
                        val: item;
                    }
                }))
            },
            select: function (event, ui) {
                $("#pesquisaEstilo").val(ui.item.val);
            }
        });
    }
});

Actionresult code for /Home/Getautocorrect :

public ActionResult GetAutoCorrect(string term)
    {
        List<SelectListItem> lista = new List<SelectListItem>();

        //variavel "db" está definida em cima como private Lab4DBEntities1 db = new Lab4DBEntities1();
        var concelhos = db.Concelho.Where(a => a.Nome.Contains(term));

        foreach(var i in concelhos)
        {
            lista.Add(new SelectListItem() { Text= i.Nome.ToString(), Value = i.Nome.ToString()});
        }

        return Json(new SelectList(lista, "Text" , "Value"), JsonRequestBehavior.AllowGet);
    }

As a response from the server I receive json file with the municipalities, but no suggestions appear in the search bar. Can someone help me solve this problem?

Answer 1

Jquery is missing: type: "POST", dataType: "json"

$(function () {
$("#pesquisaEstilo").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Home/GetAutoCorrect",
            data: { term: request.term },
               type: "POST",  
               dataType: "json",
            success: function (ficheiro) {
                response($.map(ficheiro, function (item) {
                    return
                    {
                        val: item;
                    }
                }))
            },
            select: function (event, ui) {
                $("#pesquisaEstilo").val(ui.item.val);
            }
        });
    }
});

And on the controller [HttpPost] and trade ActionResult for JsonResult

[HttpPost]
public JsonResult GetAutoCorrect(string term)
    {
        List<SelectListItem> lista = new List<SelectListItem>();

        //variavel "db" está definida em cima como private Lab4DBEntities1 db = new Lab4DBEntities1();
        var concelhos = db.Concelho.Where(a => a.Nome.Contains(term));

        foreach(var i in concelhos)
        {
            lista.Add(new SelectListItem() { Text= i.Nome.ToString(), Value = i.Nome.ToString()});
        }

        return Json(new SelectList(lista, "Text" , "Value"), JsonRequestBehavior.AllowGet);
    }