Para implementar o Autocomplete, você precisará instalar o seguinte pacote:
https://www.nuget.org/packages/jquery.ui.combined/
Suponha uma TextBox
com Autocomplete
que traga cidades, e preencha automaticamente um estado de acordo com a Id do estado. Preciso ter na minha View
os campos de cidade, estado, os hidden fields e o script que faz tudo isso funcionar:
@Html.HiddenFor(model => model.CityID)
@Html.HiddenFor(model => model.StateID)
@Html.EditorFor(model => model.CityName)
@Html.TextBoxFor(model => model.StateName, new { disabled = "disabled", @readonly = "readonly" })
<script type="text/javascript">
$(function () {
$("#CityName").autocomplete({
source: '@Url.Action("AjaxFindByName", "Cities")',
minLength: 3,
select: function (event, ui) {
$("#CityName").val(ui.item.value);
$("#CityID").val(ui.item.CityID);
$("#StateName").val(ui.item.StateName);
$("#StateID").val(ui.item.StateID);
return false;
}
});
});
</script>
No Controller, precisamos ter uma Action
que devolva um JSON para popular as informações do Autocomplete
, recebendo um term
como parâmetro (term
neste caso é padrão do jQuery UI, e quer dizer que é parte do nome da cidade neste contexto):
public JsonResult AjaxFindByName(string term)
{
var cities = context.Cities
.Include(c => c.State)
.Where(c => c.Name.ToUpper().Contains(term.ToUpper())).Take(10)
.AsEnumerable()
.Select(c => new
{
value = c.Name,
CityID = c.CityID,
StateName = c.State.Name,
StateID = c.StateID
});
return Json(cities, JsonRequestBehavior.AllowGet);
}