Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> jQuery: фильтр списка 
V
    Опции темы
Gold Dragon
Дата 27.2.2013, 10:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71



Есть выпадающий список объектов. Этот список стал расти и расти и выбирать в нём стало неудобно. Я решил сделать дополнительный фильтр, т.е. отдельное поле рядом при в воде в которое будут оставаться в списке только строки, содержащие введённые символы.. 

Но вот с реализацией что-то завис. Может кто подскажет или может у кого есть готовое решение?


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Aliance
Дата 27.2.2013, 11:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137



Ну вообще такая реализация и называется autocomplete. Если ты хочешь написать сам, нужно продумать для начала как ты хочешь чтобы было - грузился весь список и по нему именно фильтровалось средствами JS или же каждый раз делался ajax запрос и фильтровалось на уровне сервера.
PM MAIL WWW ICQ Skype   Вверх
Gold Dragon
Дата 27.2.2013, 11:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71



думал над аяксом, но пришёл к выводу что очень большая нагрузка.. Поэтому список получается сразу и весь другим ajax-запросом. А вот далее нужно уже фильтровать данные в списке.. А вот тут уже проблемы без аякса. 

Допустим я ввожу в поле данные и скриптом удаляю из списка лишнее (хотя пока не знаю как smile ). Но вдруг я ошибся и решил исправить фильтр, где тогда брать то что я удалил... Вот сижу пока и размышляю и ни как не могу ничего придумать.. наверное ещё ГРИПП не отошёл smile

Добавлено через 11 минут и 27 секунд
забыл сказать.. после выбора соответствующего значения из списка идёт дальнейшая обработка с аякс-запросом


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Aliance
Дата 27.2.2013, 12:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137



Удалять ничего не нужно, либо фильтрация при выводе (что при большом списке положит тормознутый клиент), либо копирование нужных элементов в список (что так же может положить).
На счет нагрузки на сервер - она не будет большая, если сделать грамотно - использовать debounce/throttle + кешировать результаты ответа ajax.

Получаем такой расклад:
1. Фильтруем на сервере
2. Фильтруем на клиенте
2.1. Копируем
2.2. фильтруем

Я бы выбрал все же первый вариант, но если ты хочешь второй, то вот примерная реализация обоих вариантов (2.1 и 2.2):
Код

<!-- 2.1 -->

<select id="storage" style="display: none;">
    <option value="qwerty">qwerty</option>
    <option value="asdfg">asdfg</option>
    <option value="zxcvb">zxcvb</option>
</select>
<select id="select"></select>
<input type="text" id="input" />

Код

// 2.1

$('#input').on('change', function() {

    $('#select').empty();
    for (var i in data) {
        // Фильтрация происходит здесь
        // понятное дело что нужно делать не ==, а like ***%
        // с помощью регулярок, я написал так для быстроты
        if ($('#storage').val() != $(this).val()) { continue; }
        $(select).append('<option value="'+$('#storage').val()+'">'+$('#storage').val()+'</option>');
    }

});

Код

// 2.2

// var data = <?=$json;?>;
var data = [
    {title: 'qwerty'},
    {title: 'asdfg'},
    {title: 'zxcvb'}
];
$(input).on('change', function() {

    $(select).empty();
    for (var i in data) {
        // Фильтрация происходит здесь
        // понятное дело что нужно делать не ==, а like ***%
        // с помощью регулярок, я написал так для быстроты
        if (data[i].title != $(this).val()) { continue; }
        $(select).append('<option value="'+data[i].title+'">'+data[i].title+'</option>');
    }

});


Как видишь при большом списке оба этих варианта при полном переборе всего списка будут тормозить клиент...

Это сообщение отредактировал(а) Aliance - 27.2.2013, 12:06
PM MAIL WWW ICQ Skype   Вверх
Gold Dragon
Дата 27.2.2013, 12:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71



чёрт... видимо ты прав.... нужен запрос на сервер.. Иначе клиент ляжет. А на серваке кэширование продумать.. Хотел я всё на клиента возложить, но думаю проблем будет больше.. Тогда такой вопрос, а какое событие ловить и когда? Потому что этот результат уйдёт дальше. Не хочется банально кнопку ставить..

Добавлено через 10 минут и 33 секунды
нашёл интересный вариант
http://www.linkexchanger.su/2008/39.html


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Aliance
Дата 27.2.2013, 14:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137



Цитата(Gold Dragon @  27.2.2013,  13:15 Найти цитируемый пост)
 Тогда такой вопрос, а какое событие ловить и когда? 

onchange на поле фильтрации, но тогда пользователь должен будет снять фокус с него, что не всегда понятно. хотя в данном примере достаточно будет, т.к. далее он работать будет с другим контролом (селектом).

Добавлено через 42 секунды
как альтернатива ловить события нажатия кнопок + использовать debounce/throttle.
PM MAIL WWW ICQ Skype   Вверх
Gold Dragon
Дата 27.2.2013, 14:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71



Всё.. спасибо за помощь и умные мысли.. а разобрался.. буду реализовывать. 

тема закрыта


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »


 




[ Время генерации скрипта: 0.4319 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.