Практически любой  web проект сейчас содержит поисковый движок.  В этой статье мы попытаемся

сделать собственный вариант,использующий Ajax и естественно, базу данных MySQL в качестве хранилища данных.
1. Для начала возьмем  уже  готовое приложение, для экономии времени.  Это что-то вроде ежедневника, со списком задач. 

База данных достаточно простая и имеет следующую структуру: что-то вроде ежедневника, со списком задач.  

База данных достаточно простая и имеет следующую структуру:

структуру:

                               CREATE TABLE `tasks` (

                                `id` int(11) unsigned NOT NULL auto_increment,

                                `name` varchar(60) default NULL,

                              `complete` datetime default '0000-00-00 00:00:00',

                                `created_on` datetime default '0000-00-00 00:00:00',

                               `updated_on` datetime default '0000-00-00 00:00:00',

                                PRIMARY KEY  (`id`)

                             ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

             Это собственно, говоря,  все, что, касается базы  и что нам нужно знать, чтобы организовать поиск.

2.    Нам необходимо создать   новый файл типа «view».  Он будет называться, например, «_form. html». Затем введем в пустой файл такой код:

<%= javascript_include_tag :defaults %>

<%= image_tag("/images/loading.gif",

              :align => "absmiddle",

              :border => 0,

              :id => "spinner",

              :style =>"display: none;" ) %>

<%= start_form_tag({:action=> "search"}, { :onSubmit => "Element.show('spinner');" }) %>

<table>

<tr>

<td><label for="search"><font size="1"><b>Search:</b></font></label></td>

<td><%= text_field_tag :search %></td>

<td><img alt="spinner" id="spinner" src="images/loading.gif" style="display:none;" /></td>

</tr>

</table>

<%= end_form_tag%>

    <%= observe_field :search

    :frequency => 1.0,

            :before => "Element.show('spinner')",

              :success => "Element.hide('spinner')",

    :url => { :controller => 'ticket', :action=> 'search' },

    :with => "'search=' + encodeURIComponent(value)"

    %>

 
Все сохраняем  и теперь детально  рассмотрим, что и для чего здесь используется. Первая строка –  «<%= javascript_include_tag :defaults %>»   подключает набор javascript библиотек, которые есть в каждом Ruby on Rails приложении.  Они создают все  визуальные эффекты, которые у нас здесь есть.   Далее мы создаем средствами фреймворка  новую картинку:

 
          <%= image_tag("/images/loading.gif",

              :align => "absmiddle",

              :border => 0,

              :id => "spinner",

              :style =>"display: none;" ) %>

          Путь указывает, где находится анимированный файл типа «gif», который  будет отображаться при вводе пользователем текста в поле ввода  формы поиска.  По умолчанию он «display: none», то бишь, скрыт.  Далее следует собственно сама  поисковая форма:

<%= start_form_tag({:action=> "search"}, { :onSubmit => "Element.show('spinner');" }) %>

<table>

<tr>

<td><label for="search"><font size="1"><b>Search:</b></font></label></td>

<td><%= text_field_tag :search %></td>

<td><img alt="spinner" id="spinner" src="images/loading.gif" style="display:none;" /></td>

</tr>

</table>

<%= end_form_tag%>

Она во всех отношениях обычная, кроме  2 важных элементов:

Свойства  формы { :onSubmit => "Element.show('spinner');"}  и тега картинки -  <img alt="spinner" id="spinner" src="images/loading.gif" style="display:none;" />

Все очень просто – это свойство устанавливает событие, при котором данная картинка отображается в форме, а тег помещает эту картинку внутрь формы.  И на конец, последнее, самое важное в этом файле:

 
     <%= observe_field :search

    :frequency => 1.0,

            :before => "Element.show('spinner')",

              :success => "Element.hide('spinner')",

    :url => { :controller => 'member', :action=> 'search' },

    :with => "'search=' + encodeURIComponent(value)"

    %>

 
Поле «observe_field :search»  устанавливает поле, которые мы будем обрабатывать. Поле «frequency => 1.0» ставит  частоту обновления данных в строке формы, - 1 секунда.  Два следующих поля -  «before => "Element.show('spinner')" и «success => "Element.hide('spinner')" показывают и скрывают   тот самый   анимированный  «gif» файл. Во время ввода данных он показывается, а после окончания обработки данных он исчезает. Ну и 2 последних поля: «:url => { :controller => 'ticket', :action=> 'search' }, :with => "'search=' + encodeURIComponent(value)" »   задают контроллер, и метод обработки ввода формы, имя переменной ввода и декодируют ее предварительно с помощью  стандартного метода «encodeURIComponent(value)». Поскольку наша форма – это файл типа «partial», то мы можем ее затем вставить в любой файл представления, к примеру,  в «index.rhtml»  и сразу получим готовую форму для поиска. Это делается так:

 
              <%= render :partial => "_form" %>

3.    Теперь нам надо создать еще один файл, точно того же типа «partial», но уже для отображения полученных данных.

 
  <% @tasks.each do |t| %>

 
<li>

<%= link_to t.name, {:action => 'show', :id => t.id} -%>

</li>

 
<% end %>

 
Здесь все достаточно просто.  Мы выводим данные в список линков, с отображением имени задачи. Кликнув на линке, пользователь видит полую информацию по выбранной задаче.  Файл сохраним под названием «_task.rhtml».

4.    Теперь создадим метод поиска в  текущем контролере.  Редактируем его таким образом:

         def search

        if request.post?

      query=params[:search].to_s.downcase

     @tasks = Task.find (:all , :conditions=>[name like ?", “%”+ query+ “%”)   

     if @ tasks.size > 0

     render :partial => 'task', :collection => @tasks

    else

     render :text => "<li>Nothing was found</li>", :layout => false

      end

     end

   end

Сам метод  работает так: вначале он проверяет, был ли сделан запрос, что весьма полезно. Затем параметры запроса превращаются в строку, и на всякий случай, ставятся в нижний регистр. После этого мы ищем введенные пользователем данные в таблице базы данных. В случае удачи, данные отображается, нет – показывается текст, что ничего не обнаружено.

5.    Последним файлом здесь  будет представление для нашего метода «search», с аналогичным названием, - «search.rhtml»,  Вот так оно будет выглядеть:

<%= render :partial => "_form" %>

<% if @params[:search].to_s.empty? %>

<p><h3><font color="red">You need to enter some words to search </p></font> </h3>

  <% else %>

<p>Your search: &nbsp;<i> "<%= params[:search] %>"</i><br>

<b> Found "<%=@params[:tasks] %>": <%=  @tasks.size.to_s %></b></p>

<table>

<tbody>

 
<%= render :partial => 'task" %> 

<br>

<br>

<% end %>

 
В начале  мы  выводим нашу поисковую форму    -  <%= render :partial => "_form" %>.

Далее, если пользователь ничего не ввел в форму поиска,

 <% if @params[:search].to_s.empty? %>, то показываем  сообщение ему, с просьбой ввести  данные в форму поиска.  Если же все нормально, мы отображаем полученную строку поиска:  "<%= params[:search] %>" и то количество данных, соответствующих этому вводу <b> Found "<%=@params[:tasks] %>": <%=  @tasks.size.to_s %></b></p> .  Ну и на конец, сами найденные в базе данные -  <%= render :partial => 'task" %>. На этом все, как мы видим, ничего сложного. 

опубликовано

Добавить новый Поиск

Добавить комментарий
Имя:
E-mail:	не уведомлятьуведомлять
Веб-сайт:
Заголовок:
UBB-Код:	-цвет-морская волна (aqua)чёрный (black)голубой (blue)фуксия (fuchsia)серый (gray)зелёный (green)лайм (lime)красно-коричневый (maroon)тёмно-синий (navy)оливковый (olive)пурпурный (purple)красный (red)серебрянный (silver)бирюзовый (teal)белый (white)жёлтый (yellow) -размер-крошечный (x-small)маленький (small)средний (medium)большой (large)огромный (x-large)
	Пожалуйста, введите проверочный код, который Вы видите на картинке.

Powered by !JoomlaComment 3.12

Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved.