EasyAutocomplete и ширина ввода

Когда я добавляю поведение = 'autocomplete' в свое поле ввода, ширина изменяется и больше не масштабируется с изменением размера браузера/экрана.

У кого-то, кто работал с easyAutocomplete, была такая же проблема?

Большое спасибо.

Этот код без поведения данных ЯВЛЯЕТСЯ ОТВЕТСТВЕННЫМ

  <form>
    <input class="form-control" type="text" placeholder="search">
  </form>

Этот код с data-behavior="autocomplete" НЕ ОТВЕЧАЕТ

  <form>
    <input class="form-control" type="text" placeholder="search" data-behavior="autocomplete">
  </form>

http://easyautocomplete.com — плагин автозаполнения jQuery


javascript jquery autocomplete jquery-ui-autocomplete
person rod    schedule 09.11.2017    source источник
comment
Не могли бы вы поставить свой код? это поможет лучше понять вопрос.   -  person dwij    schedule 09.11.2017
comment
Добавляю код. Этот код без data-behavior IS RESPONSIVE ‹form› ‹input class=form-control type=text placeholder=search› ‹/form› Этот код с data-behavior=autocomplete НЕ ОТВЕЧАЕТ ‹form› ‹input class=form-control type=text placeholder=search data-behavior=autocomplete› ‹/form›   -  person rod    schedule 09.11.2017

Ответы (2)


arrow_upward
10
arrow_downward

Вы можете использовать простое автозаполнение, как показано ниже, не нужно указывать поведение данных. Кроме того, вам необходимо переопределить CSS, применяемый библиотекой простого автозаполнения.

var options = {
 data: ["blue", "green", "pink", "red", "yellow"]
};

$("#example").easyAutocomplete(options);
.easy-autocomplete{
  width:100% !important
}

.easy-autocomplete input{
  width: 100%;
}

.form-wrapper{
  width: 500px;
}
<link href="https://unpkg.com/[email protected]/dist/easy-autocomplete.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.easy-autocomplete.js"></script>

<form class="form-wrapper">
  <input id="example" class="form-control" type="text" placeholder="search">
</form>

person dwij    schedule 09.11.2017
comment
Спасибо, но пока не отвечает. Мне нужно поведение данных, потому что я получаю результат с сервера в режиме реального времени, и, очевидно, я не могу получить ВСЕ данные (возможно, таблицу из 100000 строк) и напрямую сохранить в переменной параметра. - person rod; 09.11.2017
comment
Чтобы помочь вам, мне нужен полный код, охватывающий CSS, который предназначен для адаптивного интерфейса, и JS для загрузки данных с сервера. - person dwij; 09.11.2017
comment
Большое спасибо, dwij, вы решаете мою проблему. После добавления вашего класса я удаляю старые классы и теперь работает правильно!! Большое спасибо. - person rod; 09.11.2017

arrow_upward
12
arrow_downward

С вашим плагином jQuery easyautocomplete вам просто нужно установить для параметра AdjustWidth значение false, и тогда вам не нужно трогать свой CSS.

var options = {
  ...
  adjustWidth: false,
  ...
};

$("#example").easyAutocomplete(options);
person gaabora    schedule 18.03.2019