Autocomplete

<fine-autocomplete id='myAutoComplete1'
  config='{
    "maxHeight": "300px",
    "datasource": {
      "transport": {
        "read": {
          "url": "../../includes/getList.php",
          "type": "json"
        }
      },
      "serverFiltering": false
    },
    "clientEvents": {
      "open": "onClientOpen",
      "close": "onClientClose",
      "select": "onClientSelect",
      "change": "onClientChange",
      "before-filter": "onClientBeforeFilter",
      "before-databound": "onClientBeforeDataBound",
      "databound": "onClientDataBound"
    }
  }'>
  </item-template>
</fine-autocomplete>

<script type="text/javascript">
  fine.ready(function(e) {
    var el = document.getElementById('myAutoComplete1');
    fine.addListener(el, 'open', onOpen);
    fine.addListener(el, 'close', onClose);
    fine.addListener(el, 'select', onSelect);
    fine.addListener(el, 'change', onChange);
    fine.addListener(el, 'before-filter', onBeforeFilter);
    fine.addListener(el, 'before-databound', onBeforeDataBound);
    fine.addListener(el, 'databound', onDataBound);
  });
  
  var order = 0;
  var logDiv = fine.get('#log');
    
  function log(msg, obj) {
    order += 1;
    logDiv.innerText += order + '. ' + msg + '\n';
  }
  
  function onOpen(e) {
    log('myAutoComplete1 opened!');
  }
  
  function onClientOpen() {
    log('client opened');
  }
  
  //...
</script>