Криво работает скрипт выбора из списка

@radiofan · Регистрация: 18.04.2018

Студворк — интернет-сервис помощи студентам

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

Тут примерЖ

Кликните здесь для просмотра всего текста

https://probaexample.000webhostapp.com

Тут код

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
36
37
38
39
40
<html><head>
        <link rel="stylesheet" type="text/css" href="css/StyleX.css">
        <title>Проба</title>
        <script src="js/JQuery_v3.1.1.js"></script>
    </head>
    <body style="height:700px">
        <div style="width:30%;">
            <div class="radiofan-search">
                <input style="width:100%" type="text" class="form-control ts-calculate-form">
                <div class="radiofan-select" style="display: none;">
                    <ul>
                        <li class="radiofan-option">hello</li>
                        <li class="radiofan-option">world</li>
                        <li class="radiofan-option">!</li>
                        <li class="radiofan-option">hello</li>
                        <li class="radiofan-option">world</li>
                        <li class="radiofan-option">!</li>
                        <li class="radiofan-option">hello</li>
                        <li class="radiofan-option">world</li>
                        <li class="radiofan-option">!</li>
                        <li class="radiofan-option">hello</li>
                        <li class="radiofan-option">world</li>
                        <li class="radiofan-option">!</li>
                        <li class="radiofan-option">hello</li>
                        <li class="radiofan-option">world</li>
                        <li class="radiofan-option">!</li>
                        <li class="radiofan-option">hello</li>
                        <li class="radiofan-option">world</li>
                        <li class="radiofan-option">!</li>
                        <li class="radiofan-option">hello</li>
                        <li class="radiofan-option">world</li>
                        <li class="radiofan-option">!</li>
                        <hr>
                        <li class="radiofan-option">by</li>
                        <li class="radiofan-option">RADIOFAN</li>
                    </ul>
                </div>
            </div>
        </div>
</body></html>

JavaScript
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
<script type="text/javascript">
            jQuery(document).ready(function ($) {
    
            $('.radiofan-search > input').each(function (index, el){
                $(el).focus(function(){
                    $(this).siblings('.radiofan-select').slideDown({
                      duration: 200,
                      easing: "linear",
                      queue: false
                    });
                });
            });
    
            $('.radiofan-option').each(function (index, el){
                $(el).click(function(){
                    var txt = $(this).text();
                    console.log(txt);
                    $(this).closest('.radiofan-search').find('input').val(txt);
                });
            });
    
            $('.radiofan-search > input').each(function (index, el){
                $(el).blur(function(){
                    $(this).siblings('.radiofan-select').slideUp({
                     duration: 100,
                     easing: "linear",
                     queue: true
                    });
                });
            });
 
            });
</script>

Стили:

CSS
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
.radiofan-search{
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    color:inherit;
    margin:0;
}
 
.radiofan-search > input{
    border-radius:2px 2px 2px 2px;
}
 
.radiofan-select{
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    color:inherit;
    margin:0;
    padding:0;
    border-top-style:none;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
    border-width:1px;
    border-color:inherit;
    border-radius:0px 0px 2px 2px;
    max-height:400px;
    overflow-y:auto;
    position:absolute;
    width:29%;
    background-color:#ffffff;
    z-index:8000;
    display:none;
}
 
.radiofan-select > ul{
    padding:0;
    margin:0;
    list-style-type:none;
}
 
.radiofan-select > ul > hr{
    margin-top:10px;
}
 
.radiofan-option{
    margin:0;
    padding:0px 2px 1px 15px;
}
 
.radiofan-option:hover{
    background-color: rgba(0,0,0,0.1);
    cursor: pointer
}

@j2FunOnly · 29.10.2018, 10:38

Слушайте не click, а mousedown на элементах .radiofan-option.

Дело в том, что blur наступает при потере фокуса, то есть как только нажали кнопку мыши, а клик наступает после того как вы отпустите кнопку мыши - а элементы-то уже скрыты.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
jQuery(document).ready(function($) {
 
  $('.radiofan-search > input').focus(function(e) {
      $(this).siblings('.radiofan-select').slideDown({
        duration: 200,
        easing: "linear",
        queue: false
      });
  });
 
  $('.radiofan-option').on('mousedown', function(e) {
    var txt = $(this).text();
    console.log(txt);
    $(this).closest('.radiofan-search').find('input').val(txt);
  });
 
  $('.radiofan-search > input').blur(function(e) {
      $(this).siblings('.radiofan-select').slideUp({
        duration: 100,
        easing: "linear",
        queue: true
      });
  });
});

@radiofan · 29.10.2018, 14:32 **[ТС]**

Большое спасибо, j2FunOnly! Вы мне очень помогли, пока не было ответа накидал вот такой костыль:

JavaScript
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
jQuery(document).ready(function ($) {
    
    var hide = {duration: 100, easing: "linear", queue: true};
    
    $('.radiofan-search').each(function (ind, el){
        $(el).children('input').focus(function(){
            $('.radiofan-search').not(el).each(function(index, elem){
                $(elem).children('.radiofan-select').slideUp(hide);
            });
            $(this).siblings('.radiofan-select').slideDown({
              duration: 200,
              easing: "linear",
              queue: true
            });
        });
        
        $(el).find('.radiofan-option').each(function (index, elem){
            $(elem).click(function(){
                var txt = $(elem).text();
                $(el).children('input').val(txt);
                $(el).children('.radiofan-select').slideUp(hide);
            });
        });
        
        $(el).keydown(function(e){
            if($(el).children('input:focus')){
                console.log(e.which);
                if(e.which == 9){//tab
                    $(el).children('.radiofan-select').slideUp(hide);
                }
            }
        });
        
        $(el).keyup(function(e){
            if($(el).children('input:focus')){
                console.log(e.which);
                if(e.which == 18){//alt
                    $(el).children('.radiofan-select').slideUp(hide);
                }else if(e.which == 40){//стрелка вниз
                    
                }
            }
        });
        
        $(document).click(function(e) {
            if ($(e.target).closest('.radiofan-search').length) return;
            $(e.target).find('.radiofan-select').each(function(index, elem){
                $(elem).slideUp(hide);
            });
            e.stopPropagation();
        });
    });
});

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

Криво работает скрипт выбора из списка

Решение