Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/11: Рейтинг темы: голосов - 11, средняя оценка - 4.73
6 / 5 / 1
Регистрация: 27.06.2017
Сообщений: 249

Фильтрация элементов, в зависимости от того что введёт пользователь

22.10.2018, 20:33. Показов 2168. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть инпут текст ,который используется для сортировки ников.То есть при вводе символов в инпут из стобца с никами должны вылетать ники ,которые не начинаются на буквы,которые ввёл пользователь.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<ul>
 
<!--     Контакт номер 1 -->
  
  <li class="contact">
    <div class="wrap"><span class="contact-status online"></span><img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" alt="">
      <div class="meta">
        <p class="name">Admin</p> 
        <p class="preview"> . </p>
      </div>
    </div>
  </li>
  
<!--   Контакт номер 2 -->
  
  <li class="contact">
    <div class="wrap"><span class="contact-status online"></span><img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" alt="">
      <div class="meta">
        <p class="name">Стёпа</p>
        <p class="preview"> . </p>
      </div>
    </div>
  </li>
  
<!--     Контакт номер 3 -->
  
  <li class="contact">
    <div class="wrap"><span class="contact-status online"></span><img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" alt="">
      <div class="meta">
        <p class="name">Дреснч</p>
        <p class="preview"> . </p>
      </div>
    </div>
  </li>
</ul>
Здесь Admin,Стёпа,Дреснч - это ники.То есть когда пользователь вводит "Ст" в списке должен оставаться только
HTML5
1
2
3
4
5
6
7
8
9
10
<!--   Контакт номер 2 -->
  
  <li class="contact">
    <div class="wrap"><span class="contact-status online"></span><img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" alt="">
      <div class="meta">
        <p class="name">Стёпа</p>
        <p class="preview"> . </p>
      </div>
    </div>
  </li>
Немного погуглив я понял,что нужно использовать
JavaScript
1
$("div").find( $(".bigBlock") )
и
JavaScript
1
2
3
$('#textinput').keyup(function(){
  
});
Но,когда инпут пустой,все элементы должны вновь появляться.Не могу догадаться как всё это связать между собой
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
22.10.2018, 20:33
Ответы с готовыми решениями:

Найти сумму 5 элементов, которые введёт пользователь
как найти сумму 5 элементов который введёт пользователь?и правильно ли я создал двумерный массив? void main() { int a; int i,j; ...

Создать текстовый файл и записать туда то,что введёт пользователь
здравствуйте. Я так то в си не очень силён,я больше предпочитаю php. И тут появилась необходимость создать текстовый файл,и записать туда...

Что написать вместо знаков ? Если пользователь введёт на цифру а другой символ. как выдать на экран Ошибку ?
cout &lt;&lt; &quot;Введите действительную часть комплексного числа&quot; &lt;&lt; endl; cin &gt;&gt; a; if ( ??? ) { cout...

2
 Аватар для fanatikus
1932 / 1523 / 703
Регистрация: 17.11.2012
Сообщений: 6,585
22.10.2018, 22:25
Лучший ответ Сообщение было отмечено Stepashka20 как решение

Решение

Цитата Сообщение от Stepashka20 Посмотреть сообщение
Но,когда инпут пустой,все элементы должны вновь появляться.
show and hide

Добавлено через 33 минуты
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script>
    $(function () {
        $('input[name=\'filter\']').on('input', function () {
            var f = $(this).val();
            
            if (f == '') {
                $('.name').show();
            } else {
                var c = f.length;
                
                $('.name').each(function (i, e) {
                    var t = $(e).text();
                    var tt = t.substr(0, c);
                    
                    if(tt == f){
                        $(e).show();
                    }else{
                        $(e).hide();
                    }
                })
            }
        })
    })
</script>
<input type="text" name="filter">
<ul>
    <!--     Контакт номер 1 -->
 
    <li class="contact">
        <div class="wrap"><span class="contact-status online"></span><img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" alt="">
            <div class="meta">
                <p class="name">Admin</p> 
                <p class="preview"> . </p>
            </div>
        </div>
    </li>
 
    <!--   Контакт номер 2 -->
 
    <li class="contact">
        <div class="wrap"><span class="contact-status online"></span><img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" alt="">
            <div class="meta">
                <p class="name">Стёпа</p>
                <p class="preview"> . </p>
            </div>
        </div>
    </li>
 
    <!--     Контакт номер 3 -->
 
    <li class="contact">
        <div class="wrap"><span class="contact-status online"></span><img src="3749aaa8ee129d7e919bddcc7e09cd36_M.jpg" alt="">
            <div class="meta">
                <p class="name">Дреснч</p>
                <p class="preview"> . </p>
            </div>
        </div>
    </li>
</ul>
1
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
23.10.2018, 01:08
Лучший ответ Сообщение было отмечено Stepashka20 как решение

Решение

https://codepen.io/msheal/pen/QZVGwN?editors=1111

HTML5
1
   <!--  как у автора выше -->
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$('[name="filter"]').on('input', (e) => {
  // если нужна регистртозависимость, убрать toLowerCase на 3 и 6 строке
  const inputValue = e.target.value.toLowerCase();
  
  $('.contact').each((i, contact) => {
    const name = $(contact).find('.name').text().toLowerCase()
    if( name.match(`^${inputValue}`) ) {
      $(contact).show()
    } else {
      $(contact).hide()
    }
  })
})
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
23.10.2018, 01:08
Помогаю со студенческими работами здесь

Вывести ссылку в зависимости того авторизованн ли пользователь
]Доброго времени суток. Помогите. Нужно в зависимости от того авторизирован ли пользователь выводить ту или иную ссылку. Авторизованисть...

Ожидание функции, пока пользователь не введёт символ
Доброго времени суток. Вопрос. У меня есть функция, которая обрабатывает текст: myFun(input): String { for (let i = 0; i &lt;...

В строке посчитать количество символов, которые введёт пользователь
в строке посчитать количество символов,которые введёт пользователь

Удалить определённую запись по номеру, который введёт пользователь
Всем привет! Очень надеюсь на вашу помощь. Моя задача удалить определённую запись по номеру, который введёт юзер. Пользуюсь...

Создание текстового файла с именем, которое введёт пользователь
Добрый день! Есть кусок программы где пользователь вводит имя текстового файла, которое ему удобно. public static string fileAdress =...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru