Блог

Я очень стараюсь реализовать пример «поля со списком» jQuery UI. Я настроил удаленный источник данных, и он возвращает значения, которые я ввожу. Однако это работает, только если я возвращаю массив строк, например:

 render :text => Product.find_by_sql("select id, part_number from products where part_number like '#{params[:term]}%'").collect{|p| p.part_number}.to_json
  

Конечно, я действительно хочу, чтобы он также возвращал идентификатор объекта AR. К сожалению, когда я пытаюсь вернуть их оба в подмассив, я получаю кучу «неопределенных» значений в моем поле со списком.

Вот событие «выбрать», которое срабатывает в моем поле со списком:

             select: function( event, ui ) {
                ui.item.option.selected = true;
                self._trigger( "selected", event, {
                    item: ui.item.option
                });
            },
  

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

Вам нужно вернуть массив хэшей, каждый из которых имеет два атрибута — id и label.

Я использовал это с успехом:

 collect{|p| {:label=>p.name, :id=>p.id}}.to_json
  

(Я думаю, вы хотели бы вызвать part_number вместо name для вашего объекта, но это формат)

Отдельно, я думаю, что ваш код открыт для sql-инъекции, вы должны использовать синтаксис «нравится?».

 Product.where( "part_number like ?", "#{params[:term]}%" )
  

Есть также этот драгоценный камень, который я не использовал, но должен работать:

https://github.com/crowdint/rails3-jquery-autocomplete

Я не могу говорить за ту часть rails, над которой вы работаете, но я знаю, что формат, который ожидает виджет автозаполнения, выглядит следующим образом:

Локальные данные могут быть простым массивом строк или содержать объекты для каждого элемента в массиве, имеющие свойство label или value или оба.

Вышесказанное означает, что если вы не возвращаете простое Array из строк, у вас должен быть массив объектов, который включает по крайней мере свойство label или value (объекты в массиве могут содержать другие вещи, виджету все равно). Например, следующее будет работать просто отлично (и вы можете получить доступ к id свойству в обработчиках событий (например ui.item.id )

 [{ label: 'Google', id: '1234' }, { label: 'Yahoo', id: '2345' }, ... ];
  

Что касается вашего второго вопроса:

Я просмотрел документы пользовательского интерфейса jQuery и не могу понять, что на самом деле делает этот код.

Предполагается, что рассматриваемый фрагмент кода изменяет базовый select элемент выпадающего списка и устанавливает соответствующий option как выбранный. Если вы используете удаленный источник данных, вы, вероятно, можете полностью обойтись без этого.