<div class="autocomplete ">
<div class="autocomplete__control">
<div class="autocomplete__multiselect">
<div class="label">
<span class="label__text">Timo Tikker </span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
<div class="label">
<span class="label__text">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
</div>
<input type="text" value="" placeholder="Otsi siit" class="autocomplete__input">
<i class="fas fa-search autocomplete__icon"></i>
<ul class="autocomplete__list">
<li><a href="#">Taavi Tamm</a></li>
<li><a href="#">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</a></li>
<li><a href="#">Timo Tikker</a></li>
<li><a href="#">Toomas Toomingas</a></li>
<li><a href="#">Tunne Tuuleveski</a></li>
<li><a href="#">Tõnu Tõniste</a></li>
</ul>
</div>
<button class="button button--primary autocomplete__button">
Otsi
</button>
</div>
{
"foo": "bar",
"placeholder": "Otsi siit",
"results": [
"Taavi Tamm",
"Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno",
"Timo Tikker",
"Toomas Toomingas",
"Tunne Tuuleveski",
"Tõnu Tõniste"
]
}
<div class="autocomplete is-results">
<div class="autocomplete__control">
<div class="autocomplete__multiselect">
<div class="label">
<span class="label__text">Timo Tikker </span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
<div class="label">
<span class="label__text">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
</div>
<input type="text" value="" placeholder="Otsi siit" class="autocomplete__input">
<i class="fas fa-search autocomplete__icon"></i>
<ul class="autocomplete__list">
<li><a href="#">Taavi Tamm</a></li>
<li><a href="#">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</a></li>
<li><a href="#">Timo Tikker</a></li>
<li><a href="#">Toomas Toomingas</a></li>
<li><a href="#">Tunne Tuuleveski</a></li>
<li><a href="#">Tõnu Tõniste</a></li>
</ul>
</div>
<button class="button button--primary autocomplete__button">
Otsi
</button>
</div>
{
"foo": "bar",
"placeholder": "Otsi siit",
"results": [
"Taavi Tamm",
"Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno",
"Timo Tikker",
"Toomas Toomingas",
"Tunne Tuuleveski",
"Tõnu Tõniste"
],
"modifiers": "is-results"
}
<div class="autocomplete ">
<div class="autocomplete__control">
<div class="autocomplete__multiselect">
<div class="label">
<span class="label__text">Timo Tikker </span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
<div class="label">
<span class="label__text">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
</div>
<input type="text" value="Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno" placeholder="Otsi siit" class="autocomplete__input">
<i class="fas fa-search autocomplete__icon"></i>
<ul class="autocomplete__list">
<li><a href="#">Taavi Tamm</a></li>
<li><a href="#">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</a></li>
<li><a href="#">Timo Tikker</a></li>
<li><a href="#">Toomas Toomingas</a></li>
<li><a href="#">Tunne Tuuleveski</a></li>
<li><a href="#">Tõnu Tõniste</a></li>
</ul>
</div>
<button class="button button--primary autocomplete__button">
Otsi
</button>
</div>
{
"foo": "bar",
"placeholder": "Otsi siit",
"results": [
"Taavi Tamm",
"Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno",
"Timo Tikker",
"Toomas Toomingas",
"Tunne Tuuleveski",
"Tõnu Tõniste"
],
"value": "Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno"
}
<div class="autocomplete is-multiselect">
<div class="autocomplete__control">
<div class="autocomplete__multiselect">
<div class="label">
<span class="label__text">Timo Tikker </span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
<div class="label">
<span class="label__text">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
</div>
<input type="text" value="" placeholder="Otsi siit" class="autocomplete__input">
<i class="fas fa-search autocomplete__icon"></i>
<ul class="autocomplete__list">
<li><a href="#">Taavi Tamm</a></li>
<li><a href="#">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</a></li>
<li><a href="#">Timo Tikker</a></li>
<li><a href="#">Toomas Toomingas</a></li>
<li><a href="#">Tunne Tuuleveski</a></li>
<li><a href="#">Tõnu Tõniste</a></li>
</ul>
</div>
<button class="button button--primary autocomplete__button">
Otsi
</button>
</div>
{
"foo": "bar",
"placeholder": "Otsi siit",
"results": [
"Taavi Tamm",
"Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno",
"Timo Tikker",
"Toomas Toomingas",
"Tunne Tuuleveski",
"Tõnu Tõniste"
],
"modifiers": "is-multiselect"
}
<div class="autocomplete is-multiselect is-results">
<div class="autocomplete__control">
<div class="autocomplete__multiselect">
<div class="label">
<span class="label__text">Timo Tikker </span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
<div class="label">
<span class="label__text">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
</div>
<input type="text" value="" placeholder="Otsi siit" class="autocomplete__input">
<i class="fas fa-search autocomplete__icon"></i>
<ul class="autocomplete__list">
<li><a href="#">Taavi Tamm</a></li>
<li><a href="#">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</a></li>
<li><a href="#">Timo Tikker</a></li>
<li><a href="#">Toomas Toomingas</a></li>
<li><a href="#">Tunne Tuuleveski</a></li>
<li><a href="#">Tõnu Tõniste</a></li>
</ul>
</div>
<button class="button button--primary autocomplete__button">
Otsi
</button>
</div>
{
"foo": "bar",
"placeholder": "Otsi siit",
"results": [
"Taavi Tamm",
"Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno",
"Timo Tikker",
"Toomas Toomingas",
"Tunne Tuuleveski",
"Tõnu Tõniste"
],
"modifiers": "is-multiselect is-results"
}
<div class="autocomplete autocomplete--medium">
<div class="autocomplete__control">
<div class="autocomplete__multiselect">
<div class="label">
<span class="label__text">Timo Tikker </span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
<div class="label">
<span class="label__text">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
</div>
<input type="text" value="" placeholder="Otsi siit" class="autocomplete__input">
<i class="fas fa-search autocomplete__icon"></i>
<ul class="autocomplete__list">
<li><a href="#">Taavi Tamm</a></li>
<li><a href="#">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</a></li>
<li><a href="#">Timo Tikker</a></li>
<li><a href="#">Toomas Toomingas</a></li>
<li><a href="#">Tunne Tuuleveski</a></li>
<li><a href="#">Tõnu Tõniste</a></li>
</ul>
</div>
<button class="button button--primary autocomplete__button">
Otsi
</button>
</div>
{
"foo": "bar",
"placeholder": "Otsi siit",
"results": [
"Taavi Tamm",
"Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno",
"Timo Tikker",
"Toomas Toomingas",
"Tunne Tuuleveski",
"Tõnu Tõniste"
],
"modifiers": "autocomplete--medium"
}
<div class="autocomplete autocomplete--small">
<div class="autocomplete__control">
<div class="autocomplete__multiselect">
<div class="label">
<span class="label__text">Timo Tikker </span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
<div class="label">
<span class="label__text">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
</div>
<input type="text" value="" placeholder="Otsi siit" class="autocomplete__input">
<i class="fas fa-search autocomplete__icon"></i>
<ul class="autocomplete__list">
<li><a href="#">Taavi Tamm</a></li>
<li><a href="#">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</a></li>
<li><a href="#">Timo Tikker</a></li>
<li><a href="#">Toomas Toomingas</a></li>
<li><a href="#">Tunne Tuuleveski</a></li>
<li><a href="#">Tõnu Tõniste</a></li>
</ul>
</div>
<button class="button button--primary autocomplete__button">
Otsi
</button>
</div>
{
"foo": "bar",
"placeholder": "Otsi siit",
"results": [
"Taavi Tamm",
"Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno",
"Timo Tikker",
"Toomas Toomingas",
"Tunne Tuuleveski",
"Tõnu Tõniste"
],
"modifiers": "autocomplete--small"
}
<div class="autocomplete autocomplete--xsmall">
<div class="autocomplete__control">
<div class="autocomplete__multiselect">
<div class="label">
<span class="label__text">Timo Tikker </span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
<div class="label">
<span class="label__text">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</span>
<button class="label__close">
<i class="fas fa-times " ></i>
</button>
</div>
</div>
<input type="text" value="" placeholder="Otsi siit" class="autocomplete__input">
<i class="fas fa-search autocomplete__icon"></i>
<ul class="autocomplete__list">
<li><a href="#">Taavi Tamm</a></li>
<li><a href="#">Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno</a></li>
<li><a href="#">Timo Tikker</a></li>
<li><a href="#">Toomas Toomingas</a></li>
<li><a href="#">Tunne Tuuleveski</a></li>
<li><a href="#">Tõnu Tõniste</a></li>
</ul>
</div>
<button class="button button--primary autocomplete__button">
Otsi
</button>
</div>
{
"foo": "bar",
"placeholder": "Otsi siit",
"results": [
"Taavi Tamm",
"Teresa García Ramírez marries Elí Arroyo López Francisco de Paula Juan Nepomuceno",
"Timo Tikker",
"Toomas Toomingas",
"Tunne Tuuleveski",
"Tõnu Tõniste"
],
"modifiers": "autocomplete--xsmall"
}