Czasami warto zasugerować użytkownikowi dozwolone wartości w TextBox. Przykładem jest pole edycyjne w Google, które pokazuje najczęściej wyszukiwane frazy. W tym poście stworzymy podobną kontrolkę, wykorzystując do tego bibliotekę jQuery. Całość działa oczywiście na Ajaxie. Użytkownik wpisuje jakieś wartości w polu, zapytanie jest w tle wysyłane do serwera a ten z kolei zwraca listę podpowiedzi. Należy wprowadzić również pewne opóźnienie przed dostarczeniem zapytania ponieważ w przeciwnym razie zostanie wysłanych zbyt wiele niepotrzebnych pakietów.
Najpierw umieszczamy pole edycyjne, które następnie będziemy rozszerzać o możliwość sugerowania podpowiedzi:
<input type="text" id="itemName" name="itemName" value='<%=Request.Form["itemName"] %>' />
Następnie wystarczyć wstawić poniższy kod w jQuery:
<script type="text/javascript"> $(function () { $("#itemName").autocomplete({ source: function (request, response) { $.ajax({ url: "/Tags/FindItems", type: "get", dataType: "json", data: { term: request.term, maxResults: 20 }, success: function (data) { response($.map(data, function (item) { return { label: item.Title, value: item.Text, url: item.Url, type: item.Type, id: item.Id } })) } }) }, select: function (event, ui) { } }); }); </script>
Jak widać większość rzeczy robi za nas jQuery. Warto zwrócić uwagę na argument url, który zawiera adres zapytania ajaxowego. To właśnie /Tags/FindItems zostanie wywołane w tle w celu pobrania sugerowanych wartości z serwera. Z kolei w ‘select’ możemy zapieścić kod JS, który będzie wywoływany po wybraniu przez użytkownika pozycji w liście.
Na zakończenie jeszcze treść metody FindItems:
public JsonResult FindItems(string term) { Repositories.Search.SearchRepository repository = new Repositories.Search.SearchRepository(); List<Repositories.Search.SearchResult> results = new List<Repositories.Search.SearchResult>(); results.AddRange(repository.SearchPoliticians(term)); results.AddRange(repository.SearchParties(term)); return Json(results, JsonRequestBehavior.AllowGet); }
Warto zwrócić uwagę na zwracany typ – JsonResult.