EasyAutocomplete and width of input

Question

When I add behavior='autocomplete' to my input field, width is changing and not scaling anymore with browser/screen resize.

Someone experienced with easyAutocomplete has the same problem?

Thank you very much.

This code without data-behavior IS RESPONSIVE

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

This code with data-behavior="autocomplete" is NOT RESPONSIVE

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

http://easyautocomplete.com - jQuery autocomplete plugin

Can you please put your code? that will help to understand more about the question. — dwij, Nov 09 '17 at 04:58
I add the code. This code without data-behavior IS RESPONSIVE

This code with data-behavior="autocomplete" is NOT RESPONSIVE — Mr McDonald, Nov 09 '17 at 05:15

score 13 · Answer 1 · answered Mar 18 '19 at 13:48

13

With your jQuery easyautocomplete plugin you just need to set option adjustWidth to false and then you don’t need to touch your CSS.

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

$("#example").easyAutocomplete(options);

answered Mar 18 '19 at 13:48

gaabora

332
2
6

dwij · Accepted Answer · 2017-11-09T05:48:06.827

11

You can use easy-autocomplete like below, no need to put data-behavior. Also, you need to override CSS applied by the easy-autocomplete library.

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/easy-autocomplete@1.3.5/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/easy-autocomplete@1.3.5/dist/jquery.easy-autocomplete.js"></script>

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

edited Nov 09 '17 at 05:48

answered Nov 09 '17 at 05:39

dwij

694
8
17

Thank you, but is still not responsive. I need data-behavior because I get result from server in real time, and obviously I can't fetch ALL the data (maybe a table of 100000 rows) and store in the option variable directly. – Mr McDonald Nov 09 '17 at 06:11
1

In order to help you, I need to have full code covering CSS, which is for responsive and JS for server data loading. – dwij Nov 09 '17 at 06:18
Thank you very much dwij you solve my problem. After add your class, I delete old classes and now works properly!! Thank you very much. – Mr McDonald Nov 09 '17 at 06:28

EasyAutocomplete and width of input

2 Answers2

Linked