adriatic

.box .k-textbox {
    width: 80px;
}
.box .k-button {
    min-width: 80px;
}
li {
  margin: 0;
  padding: 0;
  list-style: none;

adriatic

<template>
  <div id="example">
    <div class="demo-section k-content">
      <p><strong>People:</strong></p>
      <ak-autocomplete k-data-source.bind="items">
        <input style="width: 100%;">
      </ak-autocomplete>
      <p class="demo-hint" style="word-break: break-all">Type a name, available values in the list are: ${ items } </p>
    </div>
  </div>

adriatic

<template>
  <require from="./logger.js"></require>
  <div id="example">
    <div class="demo-section k-content">
      <p><strong>Select a state in USA:</strong></p>
      <ak-autocomplete k-data-source.bind="items"
                      k-on-open.delegate="logger.log('open')"
                      k-on-close.delegate="logger.log('close')"
                      k-on-change.delegate="logger.log('change')"
                      k-on-select.delegate="onSelect($event.detail)"

adriatic

<template>
  <div id="example">
    <div class="demo-section k-content">
      <p><strong>Find a product:</strong></p>
      <ak-autocomplete k-data-source.bind="datasource";
                      k-data-text-field="ProductName";
                      k-filter="contains";
                      k-min-length.bind="3">
        <input style="width: 100%;"></input>
      </ak-autocomplete>

adriatic

<template>
  <div id="example">
    <div class="demo-section k-content">
      <h4>Search for shipping name</h4>

      <ak-autocomplete k-data-source.bind="datasource"
                      k-virtual.bind="virtual"
                      k-data-text-field="ShipName"
                      k-height.bind="520">
        <ak-template>

adriatic

<template>
  <div id="example">
    <div class="demo-section k-content">
      <p><strong>Find a customer:</strong></p>

      <ak-autocomplete k-data-source.bind="datasource"
                      k-height.bind="400"
                      k-data-text-field="ContactName">
        <input style="width: 100%">
      </ak-autocomplete>

adriatic

<template>
  <div id="example">
    <div class="demo-section k-content">
      <p><strong>People:</strong></p>

      <ak-autocomplete k-data-source.bind="items"
                      k-value.two-way="selectedValue">
        <input style="width: 100%;">
      </ak-autocomplete>

adriatic

<template>
  <div id="example">
    <div class="demo-section k-content">
      <ak-autocomplete k-data-source.bind="data"
          k-filter="startswith"
          k-placeholder="Select country..."
          k-separator=", ">
          <ak-template>
            <span innerhtml.bind="formatValue($$item, textbox)"></span>
          </ak-template>

adriatic

<template>
    <ak-chart    k-title.bind="{text: 'Gross Domestic product growth \n /GDP annual %/'}"
                k-legend.bind="{position: 'bottom'}"
                k-series-defaults.bind="seriesDefaults"
                k-series.bind="series"
                k-value-axis.bind="valueAxis"
                k-category-axis.bind="categoryAxis"
                k-tooltip.bind="tooltip">
    </ak-chart>
</template>

adriatic

<template>
    <ak-chart    k-title.bind="{text: 'Stock Prices'}"
                k-data-source.bind="datasource"
                k-legend.bind="{position: 'bottom'}"
                k-series.bind="series"
                k-value-axis.bind="valueAxis"
                k-category-axis.bind="categoryAxis"
                k-tooltip.bind="tooltip">
    </ak-chart>
</template>