Autocomplete callback function

Autocomplete-callback-function.markdown

Autocomplete callback function

Example of autocomplete callback-function with filter

A Pen by Matthijs Alles on CodePen.

License.

index.html

<div class="uk-autocomplete uk-form" id="autocomplete">
    <input type="text" id="autocomplete-input">
    <script type="text/autocomplete">
        <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results">
            {{~items}}
            <li data-value="{{ $item.value }}">
                <a>
                    {{ $item.title }}
                    <div>{{{ $item.text }}}</div>
                </a>
            </li>
            {{/items}}
        </ul>
    </script>
</div>

script.js

(function ($, UI) {
  function getAutocompleteData (release) {
  	var search = $('#autocomplete-input'), data = [
   	  {"value":"Hamburger", "title":"Hamburg title", "url":"#", "text":"Lorem ipsum dolor sit amet, consectetur ..."},
  	  {"value":"New Yorker", "title":"New York", "url":"#", "text":"Ut enim ad minim veniam, quis nostrud ..."},
   	 	{"value":"Moscower", "title":"Moscow", "url":"#", "text":"Duis aute irure dolor in reprehenderit ..."},
   	 	{"value":"Amsterdammer", "title":"Amsterdam", "url":"#", "text":"Excepteur sint occaecat cupidatat non ..."}
		];
  	release(data.filter(function(item){
      if (item.value.match(new RegExp(search.val(), 'i'))) {
        return item;
      }
    }));
	}
  UIkit.on('domready.uk.dom', function(){
    UI.autocomplete($('#autocomplete'), {
      source: getAutocompleteData
    });
  });

}(jQuery, UIkit));