Автозаполнение текстового поля с помощью DOJO

#php #autocomplete #dojo

#php #автозаполнение #dojo

Вопрос:

Я ищу простой метод с использованием DOJO для автоматического ввода текстового поля. Таблица БД, к которой я буду запрашивать (используя PHP-скрипт, возвращаемый как JSON), содержит более 100 000 записей, поэтому это действительно не должно быть в форме FilteringSelect или ComboBox, поскольку я явно не хочу, чтобы пользователь возвращал весь набор данных, нажав на стрелку вниз.

Другие библиотеки, такие как jQuery и YUI, упрощают его, но этот проект основан на DOJO, и я не хочу вводить еще один класс JS.

1. Не совсем уверен, как вы это сделаете, но вы всегда можете просто отслеживать вызовы функций в jQuery или вызовы функций YUI для этого с помощью Firebug и посмотреть, как они это делают.

Ответ №1:

Это работает!

Даже с 100 000 записей, к которым я запрашиваю. Скорость возврата составляет менее 30 мс. Я даже увеличил размер базы данных до 500 000 записей, и скорость автоматического предложения очень приемлема (все еще меньше 120 мс). Я уверен, что смогу добиться еще большего успеха с небольшим кэшированием на стороне PHP.

В итоге я использовал QueryReadStore и FilteringSelect. Вероятно, сработал бы JsonRestStore, но я нашел простой рабочий пример с сайта dojo и построил на его основе.

Вот рабочий код DOJO для текстового поля с автоматическим предложением, отображающего очень большой набор данных — короткий и приятный:

             var vendorStore = new dojox.data.QueryReadStore({
                url: "../vms/htdocs/ajax/search.php"
            });

            var vendorSelect = new dijit.form.FilteringSelect({
                name: "vendorSelection",
                store: vendorStore,
                autoComplete: false,
                required: true,
                labelType: "text",
                placeHolder: "Search vendors",
                pageSize: 20,
                hasDownArrow: false,
                style: "width: 175px;",
                searchAttr: "company_name",
                id: "vendorSelect"
            },
            "vendorSelection");

            vendorSelect.startup();

Конечно, придерживайтесь <select id="vendorSelection"></select> где-нибудь в теле страницы. Отлично работает.

Еще раз спасибо!

1. Мне любопытно, какова производительность на ie7 или ie8? У меня ужасные проблемы с производительностью примерно с 1400 записями в ie, но отлично работает в FF и Chrome.

2. Райан, я не проводил никаких тестов с ie7, но мое автозаполнение работает примерно так же с ie8, как с FF и chrome. Однако я не проводил никаких сравнительных тестов, поэтому может быть вычисляемая разница. С точки зрения пользовательского интерфейса, никакой разницы с ie8. К сожалению, у меня нет доступа к установке ie7 для тестирования.

Ответ №2:

Я не знаком с тем, как это делают jQuery или YUI, но ComboBox и FilteringSelect в Dojo имеют pageSize свойство, которое можно использовать для ограничения количества элементов, которые когда-либо запрашиваются одновременно из магазина. В раскрывающемся списке вы увидите не более этого количества элементов, сопровождаемых опциями «дополнительные варианты» и «предыдущие варианты» для просмотра дополнительных вариантов, если это применимо.

Соедините это с хранилищем данных, которое запрашивает сервер при каждой выборке (например, dojox.data.QueryReadStore или dojox.data.JsonRestStore) вместо хранилища, которое извлекает все сразу (например, dojo.data.ItemFileReadStore), и вы должны быть в состоянии делать то, что хотите.

Ответ №3:

Возможно, вы могли бы заставить свой запрос возвращать первые X строк. Каждый новый щелчок возвращает X новых строк, пропуская X.