ASP.NET Web API - AutoComplete com imagem usando Web API, Jquery UI e JSON

No último post sobre ASP.NET Web API, ASP.NET Web API - AutoComplete usando Web API, Jquery UI e JSON mostrei como fazer um simples AutoComplete. Nesse artigo vou mostrar como incrementar o que foi feito anteriormente, possibilitando exibir a imagem do que está sendo pesquisado, ou até mais informações para cada item. É necessário uma revisão post mencionado e o Visual Studio 2010/2012 com o template do ASP.NET MVC 4 Project instalados.

• Parte 1: ASP.NET Web API - AutoComplete usando Web API, Jquery UI e JSON

AutoComplete com Imagem

Criando o Modelo AutoComplete

No artigo anterior o nosso AutoComplete exibia apenas um texto para o usuário. Nosso modelo então precisa de um pequeno "upgrade" :). Precisamos de um AutoCompleteImageModel, que terá além informações básicas padrão para o Jquery UI AutoComplete , também caminho da imagem de cada item.

 Model/AutoCompleteImageModel.cs

Modificando a View

A versão original do AutoComplete não possui overflow, logo, quando o resultado traz muitos itens fica uma "bagunça". Para solucionar isso basta alterar o css, conforme uma solução como esta: Jquery UI Scrollable Results.

Content/Site.css

Basicamente alterei o css padrão do AutoComplete para ter um tamanho máximo e exibir a scrollbar.

Para nossa Imagem e descrição do AutoComplete, criei o css abaixo:

Content/Site.css

Modificando a função JavaScript

A api do Jquery UI é bem robusta, logo a personalização é algo que estava em mente quando foi construída. É possível então no AutoComplete modificar o template que é exibido para o usuário. Logo, existe o Jquery UI AutoComplete custom data. O exemplo que vou usar é bem parecido com o do site oficial.

Views/Home/Index.cshtml

O item é nosso objeto JSON espelho do AutoCompleteImageModel, logo item.value, item.label e item.image são exatamente o que criamos no servidor.

Resultado JSON para a API

Em amarelo está mudança que fiz ao log. Ao selecionarmos um item o log exibirá o mesmo que está no AutoComplete.

Em azul está o Html personalizado. O AutoComplete é uma tag ul, que passamos por parametro por essa função do proprio Jquery. Na ul é possível adicionar qualquer Html personalizado como eu fiz. Coloquei a imagem, o código e o modelo que vem do nosso JSON. 

É possível colocar praticamente qualquer coisa, o único cuidado é que o conteúdo tem que estar dentro de uma tag a.

Finalizando

Na parte Web API o que foi mudado é que populo o novo modelo já com o caminho da imagem que será exibida de cada item.

O resultado é esse:

Ao selecionar um item este vai para o log:

Espero que tenham gostado, o exemplo pode ser baixado aqui.

• Parte 1: ASP.NET Web API - AutoComplete usando Web API, Jquery UI e JSON