Как установить автоматическое заполнение jquery-ui в направляющих

Ну, я так и не получил ответа на свой вопрос выше, так что в итоге мне пришлось разбираться самому. Я подумал, что должен опубликовать решение, к которому я пришел, на случай, если есть другие парни, которые задаются тем же вопросом.

Первое, что вы должны знать: это мой первый опыт работы с javascript, и я только начинаю осваивать Rails. Поэтому, во что бы то ни стало, не стесняйтесь редактировать и комментировать все, что, по вашему мнению, я сделал не так. Правильно или нет, по крайней мере, я знаю, что он функционирует так, как я хотел.

Я думаю, что лучший способ показать это - на примере. Итак, вот как я заставил работать виджет автозаполнения в своем приложении. Вы можете пойти дальше и вставить следующий код в свое приложение, даже если вы не понимаете, что происходит, тогда мы сможем рассмотреть работу каждой части на примере. После этого у вас должно быть понимание, как изменить его для своего использования или преломить его.

ВКЛЮЧИТЕ JQUERY UI В ВАШЕ ПРИЛОЖЕНИЕ НА РЕЛЬСАХ.

Скачайте копию jQuery UI и поместите jquery-ui-1.8.2.custom.min.js в каталог /public/javascript. Также убедитесь, что у вас есть копия самого jQuery и что она находится в той же папке.

Включите файл jQuery UI и файл jQuery в файл application.html.erb следующим образом.
(вы можете назвать файлы как угодно, лишь бы они совпадали)

<%= javascript_include_tag 'jquery.min', 'jquery-ui-1.8.2.custom.min.js' %>

В скачанном вами jQuery UI будет папка, содержащая все ваши CSS данные. Ее название будет зависеть от выбранной вами темы, например, я выбрал тему 'cupertino'. Поместите всю папку с данными CSS в '/public/stylesheets/'. Затем включите файл CSS в файл application.html.erb следующим образом.

<%= stylesheet_link_tag 'cupertino/jquery-ui-1.8.2.custom' %>

ПРИМЕР АВТОКОМПЛЕКТНОГО JAVASCRIPT

Теперь возьмите следующий фрагмент кода и поместите его в одно из ваших представлений 'new'. Вы можете использовать его в любом представлении, но поймите, что я буквально взял его из существующего представления, принадлежащего контроллеру под названием 'links_controller', и он извлекает данные из 'people_controller'. Надеюсь, вы достаточно разбираетесь в Rails, чтобы понять, что нужно изменить, чтобы это работало для вас.

-- Начало большого куска кода --

    <script type="text/javascript">
    $(function() {

 // Below is the name of the textfield that will be autocomplete    
    $('#select_origin').autocomplete({
 // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
            minLength: 2,
 // This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
            source: '<%= people_path(:json) %>',
  // This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the suggestions which is the person.given_name.
            focus: function(event, ui) {
                $('#select_origin').val(ui.item.person.given_name);
                return false;
            },
 // Once a value in the drop down list is selected, do the following:
            select: function(event, ui) {
 // place the person.given_name value into the textfield called 'select_origin'...
                $('#select_origin').val(ui.item.person.given_name);
 // and place the person.id into the hidden textfield called 'link_origin_id'. 
        $('#link_origin_id').val(ui.item.person.id);
                return false;
            }
        })
 // The below code is straight from the jQuery example. It formats what data is displayed in the dropdown box, and can be customized.
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
 // For now which just want to show the person.given_name in the list.
                .append( "<a>" + item.person.given_name + "</a>" )
                .appendTo( ul );
        };
    });
    </script>



<h1>New link</h1>

<% form_for(@link) do |f| %>
  <%= f.error_messages %>

<!-- Place the following text fields in your form, the names are not important. What is important is that they match the names in your javascript above -->
  <p>
        Select which person you want to link:<br /> 
<!-- This is the textfield that will autocomplete. What is displayed here is for the user to see but the data will not go anywhere -->
        <input id="select_origin"/>
<!-- This is the hidden textfield that will be given the Persons ID based on who is selected. This value will be sent as a parameter -->
      <input id="link_origin_id" name="link[origin_id]" type="hidden"/>
  </p>
<!-- end of notes -->
  <p>
    <%= f.label :rcvd_id %><br />
    <%= f.text_field :rcvd_id %>
  </p>
  <p>
    <%= f.label :link_type %><br />
    <%= f.text_field :link_type %>
  </p>
  <p>
    <%= f.label :summary %><br />
    <%= f.text_area :summary %>
  </p>
  <p>
    <%= f.label :active %><br />
    <%= f.check_box :active %>
  </p>
  <p>
    <%= f.submit 'Create' %>
  </p>
<% end %>

-- Конец большого куска кода --

Хорошо, теперь соединим точки.

ПРЕДОСТАВЛЯЕМ ДАННЫЕ ДЛЯ АВТОЗАПОЛНЕНИЯ, ИСПОЛЬЗУЕМЫЕ В ПРЕДЛОЖЕНИЯХ

Начнем с подключения некоторых данных, которые текстовое поле автозаполнения может отображать в выпадающих предложениях. Формат, который мы будем использовать, - JSON, но не волнуйтесь, если вы не знакомы с ним... я тоже =). Достаточно знать, что это способ форматирования текста, чтобы другие части вашего/других приложений могли его использовать.

Данные, которые потребуются текстовому полю для автозаполнения, указаны в опции 'source:'. Поскольку мы хотим отправить в автозаполнение список имен людей и их ID, в качестве источника мы укажем следующее.

source: '<%= people_path(:json) %>'  

Приведенный выше помощник rails переведет в строку "/people.json". Вам не нужно создавать страницу по адресу "/people.json". Вам нужно указать вашему people_controller, что делать, когда он получает запрос на /people с форматом .json. Вставьте следующее в ваш people_controller:

def index  
# I will explain this part in a moment.
  if params[:term]
    @people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"])
  else
    @people = Person.all
  end

  respond_to do |format|  
    format.html # index.html.erb  
# Here is where you can specify how to handle the request for "/people.json"
    format.json { render :json => @people.to_json }
    end
end

Теперь все люди в @people будут отправлены в текстовое поле автозаполнения. Это подводит нас к следующему пункту.

ФИЛЬТРИРОВАНИЕ ДАННЫХ, ИСПОЛЬЗУЕМЫХ ДЛЯ АВТОЗАПОЛНЕНИЯ ПРЕДЛОЖЕНИЙ, НА ОСНОВЕ ВХОДА

Как текстовое поле автозаполнения знает, как фильтровать результаты на основе того, что вы вводите?

Виджет автозаполнения, назначенный текстовому полю, отправляет все, что вы вводите в текстовое поле, в качестве параметра в ваш источник:. Отправляемый параметр - "term". Так что если бы вы ввели в текстовое поле слово "Joe", мы бы сделали следующее:

/people.json?term=joe

Поэтому в контроллере мы имеем следующее:

# If the autocomplete is used, it will send a parameter 'term', so we catch that here
    if params[:term]
# Then we limit the number of records assigned to @people, by using the term value as a filter.
      @people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"])
# In my example, I still need to access all records when I first render the page, so for normal use I assign all. This has nothing to do with the autocomplete, just showing you how I used it in my situation.
    else
      @people = Person.all
    end

Теперь, когда мы ограничили количество записей, назначенных @people на основе того, что вводится в текстовое поле автозаполнения, мы можем преобразовать это в формат JSON для предложений автозаполнения.

respond_to do |format|  
      format.html # index.html.erb  
      format.json { render :json => @people.to_json }
    end 

Теперь просто просмотрите комментарии внутри "Большого куска кода", которые должны объяснить, как все это связано вместе.

В конце у вас должно быть текстовое поле на странице, которое действует как автозаполнение, и скрытое поле, которое будет отправлять ID в параметре вашему контроллеру.

CUSTOMIZE YOUR OWN AUTOCOMPLETE

Как только вы поймете вышеизложенное и захотите модифицировать его для своего использования, вы должны знать, что формат JSON, возвращаемый из вашего контроллера, выглядит так:

[{"person":{"id":1,"given_name":"joe","middle_name":"smith","family_name":"jones","nationality":"australian"}}]

Способ доступа к различным значениям из строки JSON в вашем javascript в этом случае будет:

ui.item.person.name_of_some_attribute_such_as_given_name

Довольно, просто. Очень похоже на доступ к атрибуту ActiveRecord в Rails.

Последнее замечание. Я потратил много времени на поиск другого способа предоставления скрытого значения, так как думал, что эта функция должна быть встроена в виджет jquery. Однако это не так. В официальном примере jQuery четко показано, что способ отправки значения, отличного от выбранного в качестве параметра, заключается в использовании скрытого поля.

Надеюсь, это кому-нибудь поможет.

Dale