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

@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();
        });
    });
});

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

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

Решение