AutoCompleteJS

Initialization - using html datalist

Initialization - html

<link rel="stylesheet" href="css/autocompletejs.css">
<input id="auto-datalist" class="w3-input w3-border" type="text">
<datalist id="browsers">
  <!--
   Data format:
   <option value="VALUE">LABEL</option> OR <option value="VALUE">
   !-->
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<script type="text/javascript" src="js/polyfill.js"></script>
<script type="text/javascript" src="js/autocompletejs.js"></script>

Initialization - javascript

AutoCompleteJS.create({
  selector: '#auto-datalist',
  startWith: false,
  timeout: 500,
  minChar: 2,
  onLoaded: function(array, list) {
    array.forEach(function(item, index) {
      list.appendChild(['<li data-value="', item.value, '">', item.value, '</li>'].join('').toDOM());
    });
  },
  onSelected: function(obj) {
    document.querySelector('#auto-datalist').value = obj.value;
  }
});
AutoCompleteJS.get('#auto-datalist').fill(document.querySelector('#browsers'));

Initialization - using service or file (JSON)

Initialization - html

<link rel="stylesheet" href="css/autocompletejs.css">
<input id="auto-datalist-car" class="w3-input w3-border" type="text">
<input id="auto-datalist-car-country" class="w3-input w3-border" type="text">
<script type="text/javascript" src="js/polyfill.js"></script>
<script type="text/javascript" src="js/autocompletejs.js"></script>

Initialization - javascript

AutoCompleteJS.create({
  selector: '#auto-datalist-car',
  service: {
    url: 'cars.txt'
  },
  startWith: true,
  timeout: 300,
  minChar: 2,
  onLoaded: function(array, list) {
    array.forEach(function(item, index) {
        list.appendChild(['<li data-value="', item.value, '">', item.label, '</li>'].join('').toDOM());
    });
  },
  onSelected: function(obj) {
    document.querySelector(('#auto-datalist-car-country(').value = obj.label.split(' - ')[0];
    document.querySelector('#auto-datalist-car').value = obj.value;
  }
});

Initialization - complex usage with service(PHP)

Service - PHP

define('SERVER', 'mysql:host=localhost;dbname=SERVER;charset=utf8');
define('USER', "USER");
define('PASS', "PASS");
$mysql = new PDO(SERVER, USER, PASS, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
$mysql->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$res = $mysql->query(
  "SELECT DISTINCT postal_code as value, CONCAT(city, ' - ', postal_code) as label, city, country_name
   FROM locations
   WHERE LOWER(country_name) = LOWER('".$_POST['country']."') AND LOWER(postal_code) LIKE LOWER('".$_POST['query']."%');"
);
if ($res) {
  $locations = $res->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($locations);

Initialization - html

<link rel="stylesheet" href="css/autocompletejs.css">
<select class="w3-select w3-border w3-border-red" id="source-country">....</select>
<input id="source-postal-code" class="w3-input w3-border w3-border-red" type="text">
<input id="result-country" class="w3-input w3-border w3-border-blue" type="text">
<input id="result-city" class="w3-input w3-border w3-border-blue" type="text">
<script type="text/javascript" src="js/polyfill.js"></script>
<script type="text/javascript" src="js/autocompletejs.js"></script>

Initialization - javascript

AutoCompleteJS.create({
  selector: '#source-postal-code',
  service: {
    url: 'locations.php'
  },
  startWith: true,
  timeout: 300,
  minChar: 1,
  onLoaded: function(array, list) {
    array.forEach(function(item, index) {
    list.appendChild(['<li data-value="', item.value, '">', item.label, '</li>'].join('').toDOM());
    });
  },
  onSelected: function(obj) {
    document.querySelector('#source-postal-code').value = obj.value;
    document.querySelector('#result-country').value = obj.country_name;
    document.querySelector('#result-city').value = obj.city;
  }
});
AutoCompleteJS.get('#source-postal-code').options.postObject.country = document.querySelector('#source-country').value;
document.querySelector('#source-country').addEventListener('change', function (e) {
  document.querySelector('#source-postal-code').value = '';
  document.querySelector('#result-country').value = '';
  document.querySelector('#result-city').value = '';
  AutoCompleteJS.get('#source-postal-code').clear().options.postObject.country = this.value;
}, false);

file_upload