Typeahead bootstrap pass parameter to model as null

Question

I'm using this plugin, to make an autocomplete field inside a form to submit. It's all ok except when I submit the form, the field passed to the controller in the model is null. I don't know how to return the data I obtained.

That's my code html:

@Html.TextBoxFor(m => m.Team, new { @type = "text", id = "team", Name = "query", @class = "form-control", placeHolder = "Team (Ej -> Barcelona)", autocomplete = "off" })

JS code:

$('#team').typeahead({
            ajax: "/Home/AutocompleteTeam",
            responseText: [
                $('#team').val()        
            ]
        });

C# code:

public ActionResult AutocompleteTeam(string query)
    {

        List<string> teams = new List<string>();
        List<TeamServiceModel> teamsService = teamService.ListTeamsByQuery(query);
        foreach (var team in teamsService)
        {
            if(team.Name.Equals("DEFAULT"))
            {
                continue;
            }
            else
            {
                teams.Add(team.Name);
            }             
        }
        return Json(teams, JsonRequestBehavior.AllowGet);
    }

The service which is returning the list I'm filtering by the query is working.

Answer 1

Typeahead already filters result. You can make an ajax call to get all teams(return an array) and set 'local' field in typeahead with array values.

See more here http://www.bootply.com/ljIOxm3qDi