jQuery Пользовательский интерфейс автозаполнения значений в горизонтальном списке - PullRequest
Новая
       14

jQuery Пользовательский интерфейс автозаполнения значений в горизонтальном списке

0 голосов
/ 30 апреля 2020

Я использую jQuery автозаполнение пользовательского интерфейса. Я точно скопировал простой пример с веб-сайта jQuery UI https://jqueryui.com/autocomplete/#default

<head>     
  <script>
  $( function() {
    var availableTags = [ 'some values here' ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Функциональность работает. Но по какой-то причине мои значения отображаются в уродливом поле со значениями рядом друг с другом.

my screenshot

Мне нужны значения в удобном вертикальном списке, который вы можете увидеть на веб-сайте jQuery UI.

jquery

Не думаю, что это проблема CSS, потому что даже если я удаляю все стили со своей веб-страницы, она все равно выглядит одинаково.

Есть идеи, почему он сломан на моей стороне? Как я могу получить хороший горизонтальный список?

Ответы [ 2 ]

1 голос
/ 08 мая 2020

Внешний вид предложений полностью контролируется CSS. Если у вас есть несколько собственных стилей на странице, например, стиль ul и li, это может вызвать точно возникшую проблему с макетом.

Вот JSFiddle , использующий точно такой же код, что и вы, и с тегами из вашего скриншота, демонстрирующие это. На самом деле, для создания того, что вы видите, нужно только стиль li.

На вашей странице должно быть применено несколько аналогичных CSS, которые противоречат и переопределяют стилизацию jQuery пользовательского интерфейса этого списка предложений. , Вы можете найти его, набрав одну букву для генерации предложений, затем открыв devtools вашего браузера и найдя сгенерированный ul - он будет иметь класс ui-autocomplete. Отключите стиль display: none, чтобы убедиться, что он отображается:

enter image description here

Теперь щелкните элементы li и проверьте стиль.

В моем примере JSFiddle вы можете увидеть причину проблемы, включив / выключив display: inline-block;, чтобы увидеть, как это влияет на список предложений:

enter image description here

0 голосов
/ 07 мая 2020

Проблема не в элементе <input>, как можно было бы ожидать. jQuery берет предоставленный список и преобразует его в элементы html <ul> и <li>. Поэтому, как только вы удалите форматирование css для этих элементов, список автозаполнения начнет отображаться правильно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...