Autocomplete with ajax in Entity Framework

Question

Autocomplete with ajax in Entity Framework

Navigation

#1 by (0 votes)

1

I have the 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 .autocomplete () function with following clock:

$(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 from / 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 get the json file with the councils, but the suggestions do not appear in the search bar. Can someone help me solve this problem?

javascript jquery c# ajax entity-framework

asked by anonymous 17.12.2017 / 20:19

1 answer

What's the difference between "zend_extension" and "extension" in php.ini? How can I not log specific IP actions in Nginx?

score 0 · 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 in controller [HttpPost] and change ActionResult by 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);
    }