Auto complete em Asp.NET MVC
Autor: Murilo | Publicado: 2010-10-02T23:58:00-07:00

Olá pessoal, após muuiiiiitttooo tempo estou aqui novamente. Estou envolvido em um projeto que está tomando bastante meu tempo, mas estou bem satisfeito porque tivemos um ótimo resultado, e muitas coisas novas estão por vir. É um portal que traz o teatro até os internautas, e lugares onde provavelmente as peças nunca iriam chegar, agora têm-se a possibilidade de assistí-las, fico feliz por estar ajudando a levar&nbsp;a cultura para novos lugares.&nbsp;Caso tenham interesse, visite o portal http://www.cennarium.com/

Vamos ao problema: fazer um autocomplete que quando a pessoa comece a digitar ele vá até o servidor e traz alguns resultados. 
Tecnologia usada: ASP.NET MVC 2 e Entity Framework.

Eu fiquei impressionado com a facilidade que tive de fazer usando post do jquery e Json do Asp.net mvc.

Vamos aos passos:

1) No seu controller, crie uma ação para retornar os dados de sua pesquisa, e faça que ela receba apenas quando a requisição for POST. No meu caso vou chamar o controller de AutoComplete, e minha ação chamará Cars, pois nela retornarei apenas o auto-complete para carros:

[HttpPost]
public ActionResult Cars(string search)
{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; string[] cars = carList.Where(c =&gt; c.Name.ToLower().StartsWith(search)).Select(c =&gt; c.Name).ToArray();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return Json(cars);
}

Vamos explicar o que fiz na ação: apenas consulto meu repositório (nesse caso um fake repositório), e retorno um array de string (nomes dos carros encontrados na pesquisa), esse array eu retorno no formato de Json para minha View, sim, é o que você está imaginando, você pode retornar qualquer objeto .NET por Json, e ele converte tudo para você automaticamente.

Apenas por questão de teste, crie uma classe na sua pasta Models da seguinte maneira:

public class Car
{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; public string Name{get;set;}
}

E no construtor do seu controller adicione:

public AutoCompleteController()
{
&nbsp;&nbsp;&nbsp;&nbsp; carList = new List&lt;Car&gt;();
&nbsp;&nbsp;&nbsp;&nbsp; carList.Add(new Car { Name = "Ferrari" });
&nbsp;&nbsp;&nbsp;&nbsp; carList.Add(new Car { Name = "Gol" });
&nbsp;&nbsp;&nbsp;&nbsp; carList.Add(new Car { Name = "KA" });
&nbsp;&nbsp;&nbsp;&nbsp; carList.Add(new Car { Name = "Vectra" });
&nbsp;&nbsp;&nbsp;&nbsp; carList.Add(new Car { Name = "Hilux" });
&nbsp;&nbsp;&nbsp;&nbsp; carList.Add(new Car { Name = "Celta" });
&nbsp;&nbsp;&nbsp;&nbsp; carList.Add(new Car { Name = "Lamborghini" });
&nbsp;&nbsp;&nbsp;&nbsp; carList.Add(new Car { Name = "S10" });
&nbsp;&nbsp;&nbsp;&nbsp; carList.Add(new Car { Name = "New Civic" });
}

2) Adicione os scripts necessários para sua View, serão eles:

jquery-1.4.2.min.js (pode baixá-lo em http://jquery.com/)
jquery.autocomplete.min.js (pode baixá-lo em http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/)

3) Faça o método em javascript para buscar os dados no servidor:

Agora que entrará a técnica de usar o post do jquery, abaixo a função:

&lt;script type="text/javascript"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function carsAutoComplete(searchValue) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (searchValue != "") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $.post("/AutoComplete/Cars", { search: searchValue }, function (result) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(".carsAutoComplete").autocomplete(result);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&lt;/script&gt;

O que estou fazendo aqui é o seguinte, o meu valor da consulta virá por parâmetro, se esse valor for diferente de vazio então chamo a ação do meu controller ("/AutoComplete/Cars"), passo o parâmetro a ser pesquisado ({ search : searchValue&nbsp;}) repare no mesmo nome do parâmetro da ação, isso faz com que o Asp.NET MVC atribua o valor automaticamente para a função, e o retorno eu o pego em uma função delegate (function(result) { ...) result será automaticamente meu vetor em javascript, o Json(cars) fará automaticamente isso pra mim, nessa função eu digo que todos os controler que tenham a classe carsAutoComplete ($(".carsAutoComplete")) deverão ser autocomplete e os valores a serem completados serão o resultado da pesquisa.

4) Indique o campo que receberá o autocomplete, juntamente com a ação que chamará o autocomplete, porém o class tem que ter o carsAutoComplete:

&lt;input type="text" class="carsAutoComplete" onkeypress="carsAutoComplete(this.value)" /&gt;

Pronto!!! Seu autocomplete está pronto.

Até a próxima.