suggest JavaScript непрозрачное поле

17 мая 2021, 09:10

Проблема в следующем. Использую скрипт:

var haystack = ["ActionScript", "AppleScript", "Asp", "BASIC", ...];
$(function(){   $('#query').suggest(haystack, {
    suggestionColor   : '#cccccc',
    moreIndicatorClass: 'suggest-more',
    moreIndicatorText : '&hellip;' 
});

для поля:

<input class="query" id="query" name="q" type="text" /></pre>

Но при запуске скрипта на странице получаю такое поле:

И возможность ввести текст есть только, есть нажать на чуть заметное расстояние(тень). При том, что совершенно не видно, что ты вводишь, но если вводить в эту "прослойку", то подбор происходит верно и выглядит это так:

Т.е. вывод подсказок верный, но поле input перестает быть обычным полем из-за подставленного скриптом div. Если удалить этот div, то остается обычное поле input, но и подсказки, которые заполняются в этом div исчезают.

Подскажите пожалуйста, в чем проблема и как ее исправить? В JS я новичок и только учусь. Если есть какой то другой похожий и бесплатный функционал - буду очень признателен за подсказки.

UPD. Если в свойствах div убрать position : absolute, то наложение этих элементов убирается, но "подсказки" тогда выводятся снизу, а мне хотелось бы, чтобы это было из разряда: . Делаю все, как из этого примера, но результат должный не получается.

UPD2. Ссылка на используемую библиотеку suggest.

Answer 1

Я бы рекомендовал вам не использовать подобные библиотеки:

Мало рейтинга
Давно не обновлялась
Явно не рабочее демо

Ошибка была в стилях для input.

Посмотрите рабочий пример.

var haystack = ["ActionScript", "AppleScript", "Asp", "BASIC"]; 
 
$(function() { 
  $('#search').suggest(haystack, { 
    suggestionColor: '#cccccc', 
    moreIndicatorClass: 'suggest-more', 
    moreIndicatorText: '&hellip;' 
  }); 
});

#search { 
  position: relative; 
  z-index: 10; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://unpkg.com/jquery-suggest/src/jquery.suggest.js"></script> 
<input type="text" name="search" id="search" />