jquery авто полный плагин, JSON - PullRequest
Новая
       13

jquery авто полный плагин, JSON

0 голосов
/ 28 декабря 2011

Мое требование - реализовать автозаполнение в моем текстовом поле с помощью моего приложения rails Я скачал плагин jquery auto complete. Пожалуйста, помогите мне с его реализацией.

Код моего контроллера: 

 def new
@release = Release.new
@ic_ids = params[:ic_ids] ? params[:ic_ids] : []
**@testers = User.find_by_sql("select * from users where id in(select user_id from user_role_assignments where role_id in (select id from roles where name like 'Tester')) order by name").paginate(:page=>params[:page],:per_page=>30)**   
 if params[:project_id]
  @release.project = Project.find(params[:project_id])
end
respond_to do |format|
  format.html # new.html.erb
  format.xml  { render :xml => @release }
end
end

Я хочу создать автозаполнение для @testers.

Код моего просмотра: 

 %td.grid.full_panels
    -table_panel "Assign Testers" do
      %table
        %th Name
        -puts "testers=#{@testers}"
        = form.label :tester_tokens, "Testers" 
        **= form.text_field :tester_tokens**

Спасибо, Ramya.

1 Ответ

1 голос
/ 29 декабря 2011

Когда вы реализуете автозаполнение, есть два способа приблизиться к нему.

  1. Приведите все данные заранее.
  2. Отправлять ajax-запрос на сервер при каждом "keydown / keyup" или "onchange"

Для первого метода есть действительно классный плагин jquery под названием jsonSuggest и это действительно легко реализовать. Вам нужен объект json в парах (id, text) следующим образом:

var myData = [{ id : "someId" , text : "someText"} , ... ]

и затем вы вызываете следующий код:

$("#myInput").jsonSuggest({ data : myData , onSelect: function(item){ /* callback code */} })

Это может подходить даже для тысяч объектов. Это даст лучшую производительность, чем несколько вызовов AJAX на сервер. Если вы предпочитаете использовать плагин jquery-ui, взгляните на пример по умолчанию

Другой метод (множественные запросы ajax) очень похож, но я не думаю, что jsonsuggest поддерживает его. Поддерживается плагином jquery-ui. Для этого случая вы должны взглянуть на удаленный пример

...