Jquery Multi-Select Для очень большого количества вариантов

Рассмотрим случай, когда пользователю необходимо выбрать несколько значений из списка тысяч значений. Ближе всего к полезному инструменту я подобрал http://quasipartikel.at/multiselect/.

Основная проблема связана с большим количеством данных, из которых пользователю приходится выбирать. Подход, который я использую в настоящее время, заключается в том, что пользователь должен ввести первый символ в текстовое поле, а затем все значения, начинающиеся с первого символа, должны отображаться для множественного выбора (таким образом, фильтруется значительный список значений)

Проблема в том, что даже в этом случае количество значений настолько велико, что для перезагрузки параметров множественного выбора требуется 5-15 секунд. Но как только значения загружены, фильтрация javascript обрабатывает все остальное, поскольку пользователь вводит последующие символы.

Любые предложения по любому другому пути решения этой ситуации????


jquery jquery-select2 jquery-ui jquery-autocomplete
person kapil    schedule 29.10.2012    source источник
comment
Я думаю, что публикация кода (HTML, JavaScript/jQuery) вместе с вашей ситуацией поможет нам устранить неполадки.   -  person JoeFletch    schedule 29.10.2012

Ответы (2)


arrow_upward
1
arrow_downward

Вместо предварительно заполненного поля множественного выбора используйте автозаполнение jQueryUI, чтобы отфильтровать сервер списка и вернуть только совпадения. клиенту (аналогично тому, как выбор тега работает в StackOverflow).

Здесь есть хороший пример выбора нескольких значений http://jqueryui.com/autocomplete/#multiple-remote

Затем вы можете сохранить результаты выбора таким же образом, как при обработке множественного выбора.

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

Добавьте глобальную переменную для хранения результатов.

var results_cache = [];

Используйте гибридный источник в своем autocomplete

source: function( request, response ) {
    // get the first letter of your search term
    var letter = request.term.substring(0,1);
    // check to see if we already have results for this letter
    if (!results_cache[letter]){
        // no results, fetch via AJAX
        $.getJSON( "search.php", { term: request.term }, 
            function(data){ 
                // cache results
                results_cache[letter] = data;
                // filter results (in case we have more than just 1 character in the term)
                response($.ui.autocomplete.filter(data, request.term));
            }
        );
    } else {
        // we already have data for this letter, just filter the results from the cache
        response($.ui.autocomplete.filter(results_cache[letter], request.term));
    }
},
search: function() {
    // make sure we have at least 1 character for the term
    if (!this.value) return;
    var term = this.value;
},
person doublesharp    schedule 29.10.2012
comment
Вы уверены, что jQueryUI Autocomplete фильтрует серверную часть? Что заставило вас поверить в это? - person dougmacklin; 29.10.2012
comment
@DougieBear Я имел в виду использовать AJAX source: для загрузки ваших данных, которые затем можно отфильтровать на стороне сервера. Я реализовал это в прошлом. - person doublesharp; 29.10.2012
comment
Хорошо, я только что проверил, есть также опция автозаполнения для выбора нескольких значений. довольно круто, но не лучше ли упомянутая ранее опция множественного выбора, где с помощью всего одного поиска ajax для первой введенной буквы мы можем получить предварительно заполненный список, а затем добавить несколько значений из результата в один клик, а не чем вводить каждый из них по отдельности. Это было бы быстрее. - person kapil; 29.10.2012
comment
@kapil, это определенно был бы вариант, но вам нужно было бы реализовать гибрид из двух самостоятельно, я приведу пример в своем ответе. - person doublesharp; 29.10.2012
comment
@kapil обновлен примером, непроверенным, но, надеюсь, достаточным, чтобы сделать вывод о намерениях. - person doublesharp; 29.10.2012
comment
@ doublesharp Я понял идею ... + использование автозаполнения вместо множественного выбора также сделает дизайн простым и коротким. Благодарность.... - person kapil; 30.10.2012
comment
@kapil Отлично ... можно настроить для повышения производительности, если количество результатов также изменится, например, отображение результатов только после ввода X символов (но все еще получение с сервера первой буквы) или выполнение запроса к сервер для X символов вместо первого (если у вас будет больше данных, это может сделать его более отзывчивым) - person doublesharp; 30.10.2012
comment
@doublesharp Да... Но только одно сомнение. Если сказать, что данные ответа большие, и мы храним их в глобальной переменной javascript для нескольких входных данных, сколько данных может храниться в переменной... Я знаю, что это вне контекста, но я никогда не хранил такие большие данные в переменная javascript... - person kapil; 30.10.2012
comment
@kapil - изначально вы хранили их все в <select>, а затем фильтровали с помощью javascript, поэтому, вероятно, не слишком велики, но если вас это беспокоит, вы всегда можете опустить часть кэширования и всегда получать только первую букву или сохранить в кэше только N результатов, хотя для этого потребуется добавить дополнительные функции, чтобы просто очистить массив самых старых данных или любую другую схему, которую вы выберете. - person doublesharp; 30.10.2012

arrow_upward
0
arrow_downward

Полезно было следующее:

Сначала отфильтруйте значения на основе определенных входных параметров, прежде чем выбрать окончательный вход большого размера. Во-вторых, увеличение ограничения с одного символа до нескольких перед загрузкой значений выбора jquery. Это еще больше ограничит количество значений, но пользователь должен знать об ограничении ввода нескольких символов.

Но http://quasipartikel.at/multiselect/ по-прежнему кажется лучшим доступным вариантом.

person kapil    schedule 29.10.2012