Работа с огромными данными в полях выбора - PullRequest
10 голосов
/ 18 февраля 2011

Привет! Я использую jQuery и получаю «элементы» из одной из моих таблиц mySQL. У меня есть около 20 000 «элементов» в этой таблице, и она будет использоваться в качестве параметра поиска в моей форме. Таким образом, в основном они могут искать «покупки», которые содержат этот «товар».

Теперь мне нужно, чтобы они могли выбрать «элемент» из выпадающего списка, но заполнение выпадающего списка 20 000 «элементов» занимает довольно много времени. Мне было интересно, есть ли какой-нибудь плагин jQuery, который поддерживает разбиение на страницы для выпадающих списков с автозаполнением.

Таким образом, пользователь может либо начать набирать первые несколько букв, отфильтровав список, либо просто щелкнуть стрелку и увидеть, может быть, 20 пунктов, а последнее - «Пожалуйста, нажмите для получения дополнительной информации».

Я открыт для любых других предложений по работе с огромным набором данных и заполнению полей выбора HTML указанным набором данных.

На этой странице поиска может быть несколько полей выбора, где пользователь может выбрать «элемент», «покупателя» или что-нибудь в этих строках, а затем нажать «Поиск».

Ответы [ 3 ]

4 голосов
/ 18 февраля 2011

С таким большим набором данных пора использовать Ajax ...

проверить следующие плагины автозаполнения:

http://www.pengoworks.com/workshop/jquery/autocomplete.htm

и

http://code.google.com/p/jquery-autocomplete/

4 голосов
/ 18 февраля 2011

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

В принципе, концепция такова:

  • Используйте jQuery $.ajax для извлечения данных из вашей базы данных
  • Передача 2 параметров из jQuery в оператор SELECT вашей базы данных
    • Ключевое слово
    • PageIndex
  • Поиск всех элементов, начиная с ключевого слова (автозаполнение), но возвращает только определенное количество результатов (т. Е. 20)
  • Заполнив результаты в раскрывающемся списке, проверьте, действительно ли имеется более 20 элементов, и добавьте дополнительный <option>, называемый . Пожалуйста, нажмите для получения дополнительной ...
  • Свяжите тот же самый вызов $.ajax с этим <option>, проверив его индекс и используя событие onchange выпадающих меню (его индекс будет 20, потому что это 21-й элемент в списке) и увеличьте отправку pageIndex, который вы отправляете база данных

Если вам нужна дополнительная помощь по подкачке в PHP/mySQL, ознакомьтесь с этим руководством .

2 голосов
/ 18 февраля 2011

20000 элементов слишком велики для любого вида выпадающего списка, если только список не возвращает элементы в ответ на поиск, предпочтительно поиск, содержащий хотя бы несколько символов. «Щелчок для большего» кажется слабым и не является типичным поведением выпадающего меню. А что, если элемент, который хочет получить пользователь, находится в списке на 10000 пунктов?

Предполагая, что ваши элементы - это простые пары имя / значение (имя строки, целочисленный идентификатор или тому подобное).

JSON, тем не менее, может представлять 20000 элементов в упрощенном виде. Вы можете создать простой диалог (или список) на стороне клиента, который связывается с этими элементами, просматривает их страницы и обеспечивает фильтрацию в реальном времени. Это, безусловно, возможно (я это сделал), но требует значительного количества пользовательских сценариев или существующего элемента управления.

Преимуществом этого подхода является то, что вы можете осуществлять поиск в режиме реального времени при каждом нажатии клавиши. Удивительно, но JavaScript довольно легко справится с простыми поисками в больших наборах данных.

Если производительность является ключевой, 20000 предметов все еще слишком велики, даже в JSON. Объедините клиентский скрипт с серверным кодом для поиска, фильтрации, разбиения на страницы и т. Д. И предоставьте пользователю только ограниченный набор результатов.

РЕДАКТИРОВАТЬ: Если вы не хотите писать свой собственный элемент управления таблицей данных, вот один из возможных вариантов для сетки, которая использует JSON: http://developer.yahoo.com/yui/examples/datatable/

...