За последние 24 часа нас посетили 19549 программистов и 1633 робота. Сейчас ищут 1845 программистов ...

Фильтр по первым буквам фамилии

Тема в разделе "JavaScript и AJAX", создана пользователем 027, 1 июл 2016.

  1. 027

    027 Активный пользователь

    С нами с:
    19 апр 2011
    Сообщения:
    25
    Симпатии:
    0
    Приемная кампания в разгаре.
    Имеются длинные списки абитуры, отсортированные по сложной системе ранжирования.
    Прикрутил туда по-быстрому честно стыренный скриптик (демка).

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

    Было бы правильнее искать по первым буквам фамилии. А скриптик сей ищет так:
    Код (Javascript):
    1. hide = $(filterTarget).find(child + ':not(:Contains("' + filter + '"))');
    2. show = $(filterTarget).find(child + ':Contains("' + filter + '")');
    Можно ли простыми средствами (jquery или плагин какой) искать по второй ячейке в ряду таблицы, причем регекспом вида ^abcd, т.е. с начала строки ФИО?

    Или проще будет на аяксе все переписать... хотя там свои сложности с вычислением рейтинга у отфильтрованных.

    (прошу прощения за возможно тупое изложение, голова дуреет от глобальной переделки всего подряд под очередные извращенные выдумки Минобрнауки)
     
  2. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
  3. 027

    027 Активный пользователь

    С нами с:
    19 апр 2011
    Сообщения:
    25
    Симпатии:
    0
    А, ну да... Как я про него забыл! Простой такой, легковесный плагин. :)

    Потыкал палочкой в тот, про который писал, на тестовой табличке в 6500 строк.
    Не самый дохлый комп (i5) отфильтровывает фамилию Иванов примерно за 14 сек на тормозилле, на хромоножке еще дольше, на мобильном хромоногом около минуты (бюджетное 2-ядерное 1.4GHz 1GB ведро).
    Не, не пойдет.
    На стороне сервера надоть.
     
  4. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Пример в песочнице. Т.к. элементы изначально кешируем, работать должно достаточно быстро
    Код (Javascript):
    1. var tr = $('tr'),
    2.     td2 = $('td:nth-child(2)'); // ищем по второй колонке
    3. $('#keyword').on('input', function() {
    4.     var kw = $.trim($(this).val()),
    5.         reg,
    6.         found;
    7.     if (kw === '') {
    8.         tr.show();
    9.     } else {
    10.         tr.hide();
    11.         reg = new RegExp('^' + kw, 'ig');
    12.         found = td2.filter(function() {
    13.             return reg.test($(this).text());
    14.         }).closest('tr').show()
    15.     }
    16. });
     
    #4 Deonis, 1 июл 2016
    Последнее редактирование: 1 июл 2016
  5. 027

    027 Активный пользователь

    С нами с:
    19 апр 2011
    Сообщения:
    25
    Симпатии:
    0
    Так-так, вот это уже интересно.
    Правда, на слегка трезвый и глубоко дилетантский взгляд, там методы из 2-й или 3-й ветки jQuery?
    Мне пока слезать с 1-й нежелательно. Провинциальный вуз, множество старых таратаек (ХР) и дремучих пользователей (гуманитарии), все еще трепыхаюсь и силюсь поддерживать для них ИЕ8, насколько возможно.
    (да, я такой дурак)
    В любом случае, большое Вам спасибо.
     
  6. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Метод .on() появился в версии 1.7 и замечтательно поддерживается старыми ослами. В принципе, можно обойтись и без этого метода, тем более, если делегирование использоваться не будет. Событие "input", для большей уверенности, можно заменить на "keyup". Всё остальное будет работать без проблем и даже на седьмом осле.
    Код (Javascript):
    1. $('#keyword').keyup(function() {
    2.    // ...
    3. });
     
  7. 027

    027 Активный пользователь

    С нами с:
    19 апр 2011
    Сообщения:
    25
    Симпатии:
    0
    ой, простите не метод, а селектор (простите старого чайника, даже не быдлокодер)
    :nth-child
    копался сегодня в апи первой ветки, не припомню такого
    а метод closest() в первой есть?

    простите, что не полез сам смотреть, чесслово глаза от напряжения плывут, чтоб этому рособрнадзору вперехлест через минобрнауку трижды в шоколадный глаз нефритовым стеблем с приказом 1174 наискосок прямо в микроразметку стандартом schema.org с кемелкейсом наперевес да на галеру им. товарища Харона!
     
  8. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Есть
     
  9. 027

    027 Активный пользователь

    С нами с:
    19 апр 2011
    Сообщения:
    25
    Симпатии:
    0
    Спасибо еще раз, таки напряг органы зрения, нашел самостоятельно
    version added: 1.1.4jQuery( ":nth-child(index/even/odd/equation)" )
    в понедельник, даст б-г, наскребу время, попробую Вашу идею

    С этим фильтром такая беда: сам придумал и прикрутил, чтобы людям удобнее, выкроил время в потоке дел по ублажению бота (паука) Рособрнадзора (проверяльщик обязательных сведений на оф. сайте).
    Показал приемной комиссии. Они так обрадовались! Им, оказывается, звонят, спрашивают, беспокоятся — абитура и родители, не могут никак себя найти в ранжированных списках (Ctrl+F для них рокет сайенс).
    А они (комиссия) стесняются меня попросить что-то прикрутить (им же все кажется очень сложным, магия, блин).
    А тут — обана, на видном месте поле «найти себя»
    А я даже не быдлокодер!
     
  10. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    На стороне сервера он тоже умеет и довольно шустро, 6500 строк это далеко не предел ) А зачем вообще таблица? Берете select2, поиск по ajax и по результату отдаете страничку. Быстро и не жрет ресурсов.
     
  11. 027

    027 Активный пользователь

    С нами с:
    19 апр 2011
    Сообщения:
    25
    Симпатии:
    0
    Таблицу я обязан выводить, дабы проверяющий не имел возможности придраться. Это еще у нас вуз маленький, у крупных подобные списки могут содержать более сотни тысяч строк. И все это добро должно быть вывалено в строго определенном месте, причем в двух незначительно отличающихся версиях. На одной странице, ага. Иначе тупой бот их не найдет и поставит минус по этому пункту. Отсутствие важной информации. В общем, это сервис для казенного бота.

    Параллельно с этим непотребством мы держим сервис для человека, на что, слава богу, имеем право. Но человек может и сюда
    забрести, и таки забредает. И его мне, чисто по-человечески, жалко. Некоторые уже на сотне фамилий теряются, не могут себя обнаружить и звонят в приемную комиссию.
    А что такое select2?
     
  12. 027

    027 Активный пользователь

    С нами с:
    19 апр 2011
    Сообщения:
    25
    Симпатии:
    0
    На стороне сервера этого счастья мне не нужно. :) На стороне сервера у меня есть мускуль и БД, в которой фамилия хранится отдельно.
    В общем, прихожу к такому выводу: обойтись малой кровью (простеньким жабаскриптом) не получается. Попробую в понедельник прикрутить скрипт, что посоветовал камрад @Deonis, но все равно, по уму надо фильтр делать на аяксе. Вываливать всю таблицу целиком (для киборга), а по результату аякс-запроса вырезать TBODY и вставлять отфильтрованное. При удалении всех символов из инпута возвращать припрятанное тело на исходное место.
    --- Добавлено ---
    А, нашел. Занятная штука, и я уже вижу, где она будет полезной. Спасибо.
     
  13. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    А в чем, собственно, проблема? Я бы тоже реализовал данную задачу с помощью Ajax. Десяток строк на JS (к тому же, без всяких библиотек), еще десяток на PHP и не нужно никаких возвратно-поступательных движений в область мозга.
     
  14. rodent90

    rodent90 Новичок

    С нами с:
    26 мар 2015
    Сообщения:
    533
    Симпатии:
    37
    Код (Javascript):
    1. var search = 'Ан';
    2. $('table tr').each(function () {
    3.      var td = $($('td', $(this)).get(1)), txt = td.text().trim();
    4.      if(search === txt.substr(0, search.length)) {
    5.          td.css('background','#ff0000');
    6.      }
    7. });
     
  15. 027

    027 Активный пользователь

    С нами с:
    19 апр 2011
    Сообщения:
    25
    Симпатии:
    0
    Проблема банальная до отвращения — острая нехватка времени (да и сил). На аяксе так и так придется делать, я просто пытаюсь временно выкрутиться простейшими средствами. Точнее, пытался улучшить это самое простое средство с помощью комьюнити. Впрочем, допиливать его уже поздно. Списки растут стремительным домкратом.
    jQuery все равно уже используется, а с pure JS я на Вы. Так, самые азы.
    Десятком не обойтись, в большинстве списков нужно соблюдать ранжирование абитуриентов по весьма запутанным и многосложным правилам. Этих списков много, больше полусотни, и есть пять типов ранжирования внутри них. Плюс общий алфавитный список, вернее, два почти идентичных.

    Но я тут потихоньку осваиваю ООП и шаблонизацию, на днях переписал говнокод-лапшу (костыль на костыле), что накапливался с момента введения этого б-гмерзкого ЕГЭ.
    Надеюсь, обойдется парой доролнительных несложных методов, плюс тем самым десятком строк для собственно обработчика.
    Не поясните, к чему относится тот смайлик? Если к моей малограмотности в JS, ничего удивительного, яжнепрограммист. :) Как пристроить приведенный вами код, представляю очень приблизительно. Да и смысла уже нет, поздно. Спасибо.
     
  16. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    этот смайлик у него в подписи, а значит относится к любому написанному им сообщению.
     
  17. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Хм... А я почему-то подумал, что смайлик появился после того, как @rodent90 осознал, что написал.
     
  18. 027

    027 Активный пользователь

    С нами с:
    19 апр 2011
    Сообщения:
    25
    Симпатии:
    0
    Обдумываю это дело урывками, есть вопрос к опытным кодерам. Верной ли дорогой двигаюсь, или этот велосипед не так должен ездить?

    Из некоего частного ранжированного списка (называется «по совокупности условий приема») — с номерочками в очереди на поступление — надо отфильтровать по первым буквам фамилии (+имени, +отчества). Суть в том, что нельзя просто взять и сделать ту же выборку с дополнительным AND WHERE surname LIKE '$filter%'. Нельзя, будет новая нумерация среди отфильтрованных, а надо рейтинг по исходному списку.

    Т.е., что -то типа:
    Код (Text):
    1. 4.   Иванов Иван Иваныч                 <всякая разная обязательная фигня>
    2. 8.   Иванов Сергей Иваныч               <всякая разная обязательная фигня>
    3. 36.  Ивановский Ромуальд Дормидонтович  <всякая разная обязательная фигня>
    4. 118. Иванопуло Остап Сулейманович       <всякая разная обязательная фигня>
    (Причем, обязательная фигня может кое-где иметь объединенные ячейки, что как бы не добавляет радости).

    Как предполагаю это делать.


    Методы для формирования полных списков уже есть.
    Формирую по ajax-запросу соответствующий полный список (одномерный массив).
    Создаю временную таблицу в БД, и записываю в нее этот массив, добавив автоинкрементальное поле. Это поле и будет номером в очереди.
    (Сейчас эту позицию вычисляет итератор в шаблоне, надо переместить его в метод, и можно использовать этот же шаблон).
    Временную таблицу фильтровать простым SQL-запросом.
    Формировать html тем же шаблоном (переделав у него итератор, понятно).

    Попутный вопрос: есть ли смысл сериализовать все, кроме трех нужных для фильтра полей (т.е. запихнуть остальное в одно поле), даст ли это выигрыш по нагрузке?
     
    #18 027, 5 июл 2016
    Последнее редактирование: 5 июл 2016
  19. rodent90

    rodent90 Новичок

    С нами с:
    26 мар 2015
    Сообщения:
    533
    Симпатии:
    37
    Достали вы с этим смаиликом :D, все забываю убрать.
    По теме, ТС! Тебя вообще не понятно! Ты сам с собой разговариваешь?
    Где хоть один пример кода и нормально описанной задачи?