AJAX подсказка/автозаполнение на jQuery.
Хотя я часто ругаю тормознутость и убогость jQuery на своем сайте ([хотя и пользуюсь jQuery иногда), но на этой страничке я опишу один более ли менее стандратный и распространенный jQuery-скриптик, который я с успехом применяю в своих проектах на ASP.NET MVC и ASP.NET и для которого я не вижу альтернативы. Я также постараюсь упомянуть все, что необходимо чтобы сделать, чтобы такой hint/prompt/autocomlete, (который вы видите на титульном скрине этой странички) заработал в вашем проекте.
На основном шаблоне (VIEW) надо обьявить элемент Input и элемент Marker - в первый из них собственно осуществляется ввод данных, а во второй элемент вписывается список с автоподсказкой. У меня этот проект делался для РЖД и поэтому html-элемент для ввода имеет название PoesdNum, а DIV-элемент куда вписывается подсказка - имеет имя PoesdNumMarker:
1: <td>
2: <span style="color: #520122; font-size: 10px">номер поезда</span><br />
3: <%If ViewData("PoesdNum") Is Nothing Then%>
4: <input id="PoesdNum" name="PoesdNum" type="text" style="color: #520122" />
5: <%Else%>
6: <input id="PoesdNum" name="PoesdNum" type="text" style="color: #520122" value ='<%=ViewData("PoesdNum")>%' />
7: <%End If%>
8: </td>
9: ...
10: <td align="left">
11: <span id="PoesdNumMarker" />
12: </td>
Стиль, которым выводится подсказка, надо прописать в CSS:
1: .autocomplete
2: {
3: cursor: pointer;
4: list-style-type:none;
5: padding: 0 0 0 3;
6: margin: -5 0 0 0;
7: }
8: .autocomplete li
9: {
10: color: #520122;
11: cursor: pointer;
12: list-style-type:none;
13: padding:0px;
14: margin: -5 0 0 0;
15: }
16: .autocomplete .selected
17: {
18: color: #ED0364;
19: cursor: pointer;
20: border-top:1px solod gray;
21: list-style-type:none;
22: padding:0px;
23: margin: -5 0 0 0;
24: }
И вот собственно тот самый jQuery-скрипт, который обеспечивает вывод подсказки-автозаполнения:
1: <script type="text/javascript" language="javascript">
2:
3: $(document).ready(function () {
4:
5: var $autocomplete = $('<ul class="autocomplete"></ul>')
6: .hide()
7: .insertAfter('#PoesdNumMarker');
8: var selectedItem = null;
9:
10: var setSelectetedItem = function (item) {
11: selectedItem = item;
12: if (selectedItem == null) {
13: $autocomplete.hide();
14: return;
15: }
16: if (selectedItem < 0) {
17: selectedItem = 0;
18: }
19: if (selectedItem >= $autocomplete.find('li').length) {
20: selectedItem = $autocomplete.find('li').length - 1;
21: }
22: $autocomplete.find('li').removeClass('selected')
23: .eq(selectedItem).addClass('selected');
24: $autocomplete.show();
25: };
26:
27: var populateSearchField = function () {
28: $('#PoesdNum').val($autocomplete
29: .find('li').eq(selectedItem).text());
30: setSelectetedItem(null);
31: };
32:
33: $('#PoesdNum')
34: .attr('autocomplete', 'off')
35: .keyup(function (event) {
36: if (event.keyCode > 40 || event.keyCode == 8) {
37: //клавиши с кодом 40 и ниже - спецсимволы, 8 - забой
38: $.ajax({
39: 'url': '/admin/home/ajax_autocomplete',
40: 'data': { 'search-text': $('#PoesdNum').val() },
41: 'dataType': 'json',
42: 'type': 'GET',
43: 'success': function (json_array) {
44: if (json_array.length) {
45: $autocomplete.empty();
46: $.each(json_array, function (index, term) {
47: $('<li></li>').text(term)
48: .appendTo($autocomplete)
49: .mouseover(function () {
50: setSelectetedItem(index);
51: }).click(populateSearchField);
52: });
53: setSelectetedItem(0);
54: }
55: else {
56: setSelectetedItem(null);
57: }
58: }
59: });
60: }
61: else if (event.keyCode == 38 && selectedItem !== null) {
62: //нажата стрелка вверх
63: setSelectetedItem(selectedItem - 1);
64: event.preventDefault();
65: }
66: else if (event.keyCode == 40 && selectedItem !== null) {
67: //нажата стрелка вниз
68: setSelectetedItem(selectedItem + 1);
69: event.preventDefault();
70: }
71: else if (event.keyCode == 27 && selectedItem !== null) {
72: //нажата ESC
73: setSelectetedItem(null);
74: }
75: }).keypress(function (event) {
76: if (event.keyCode == 13 && selectedItem !== null) {
77: //нажат Enter
78: populateSearchField();
79: event.preventDefault();
80: }
81: }).blur(function (event) {
82: setTimeout(function () {
83: setSelectetedItem(null);
84: }, 250);
85: });
86: });
87:
88: </script>
Как вы видите, этот скрипт обращается по URL, указанному в строке 39 (/admin/home/ajax_autocomplete) и анонимная функция, определенная в строках 51-66 формирует список элементов для подсказки.А что же находится на сервере по URL /admin/home/ajax_autocomplete?
На сервере в контроллере, обрабатывающем реквест по этому адресу - находится вот такая функция:
1: 'GET: http://localhost:5734/home/ajax_autocomplete?search=a
2: Function ajax_autocomplete() As JsonResult
3: If Request.QueryString("search-text") <> "" Then
4: Dim Result As New JsonResult
5: 'Dim Arr1 As Array = {"a", "b", "c"}
6: 'Result.Data = Arr1
7: 'итогоговый формируемый JSON для скрипта ["a","b","c"]
8: Dim DB1 As New RailWayDB1DataContext
9: Dim NumList = DB1.PoesdNumHelper(Request.QueryString("search-text")).ToList
10: Dim Arr1 As New ArrayList
11: For i = 1 To NumList.Count - 1
12: Arr1.Add(CType(NumList(i), PoesdNumHelperResult).Number)
13: Next
14: Result.Data = Arr1
15: Result.JsonRequestBehavior = Mvc.JsonRequestBehavior.AllowGet
16: Return Result
17: End If
18: End Function
В этом серверном коде в строках 5-6 находится закомментированный текстик, которым вы можете проверить работу всего AJAX-механизма - пока у вас еще не отлажены запросы в базу.
Три переменные - RailWayDB1DataContext, PoesdNumHelper, PoesdNumHelperResult - определены у меня с помощью диалоговых инструментов студии Linq-To-SQL. Грубо говоря - это простой SQL-запрос в базу, где итоговый буфер в памяти для приема значения формируется путем анализа типа результата, возвращамого SQL-запросом.
Вот собственно и все, что надо сделать, чтобы в вашем проекте заработала подсказка-автозаполнение:
В принципе, для изучения jQuery я когда-то приобрел две книжки. И обе меня не разочаровали - это оказались не просто красивые обложки вокруг бессмысленной лабуды, а действиительно полезное чтиво:
Еще несколько поучительных примеров использования jQuery я описал на страничках Мой первый сайт на MVC 3 Razor, Как с помощью jQuery сделать флеш-ролик резиновым, Как сделать простейший Web-handler - формирующий XML или JSON, Заполнение связанных списков на MS AJAX и jQuery.
)
|
|