(MVC) MVC (2011 год)

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.



Comments ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17>  <18>  <19>  <20>  <21>  <22>  <23
Link to this page: //www.vb-net.com/AutoComplete/index.htm
<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <CHAT ME>  <ABOUT ME>  < THANKS ME>
507">