Goleki.js

Now searching with autocomplete would be easier.

Fork     Star

Overview

Goleki.js is tiny jQuery plugin that gives you flexibility to support input with autocomplete for searching local or remote data. Currently features that provide by this package is :


  • Search remote data
  • Search local data
  • Customize template
  • Support bootstrap


Download Goleki.js

Installation

You can download manual or if you prefer using package manager you can too.

Install with bower

bower install goleki --save

Install with npm

npm install goleki --save


Then just include the following lines of code before </body> section of your HTML.

<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/goleki.js" type="text/javascript"></script>

That's it, you done! Now checkout example below.

Basic usage 

$('.basic').goleki({
   source: 'https://api.github.com/search/repositories',
   jsonData: 'items',
   templates: {
      item: function(obj) {
         return '<a href="'+ obj.html_url +'" style="color: green;">'+ obj.full_name +'</a>';
      }
   }
});

Custom template 

$('.custom_template').goleki({
  source: 'https://api.github.com/search/repositories',
  jsonData: 'items',
  templates: {
    loading: 'please waiting prend...',
    empty: function(el) {
      return '<a>There is no data for Keyword "<b>'+ el.val() +'</b>"</a>';
    },
    item: function(obj) {
      return '<a href="'+ obj.html_url +'" data-result="'+ obj.full_name +'" class="media" style="margin:0px;">\n '+
      ' <div class="media-left">\n '+
      '   <img class="media-object" src="'+ obj.owner.avatar_url +'&s=48" style="width: 24px; height: 24px;">\n '+
      ' </div>\n '+
      ' <div class="media-body">\n '+
      '   <h4 class="media-heading">'+ obj.full_name +'</h4>\n '+
      '   <small>'+ obj.owner.login +'</small>\n '+
      ' </div>\n '+
      '</div>';
    },
    fail: function(el) {
      return '<a>Sorry there is no data for keyword : "<b>'+ el.val() +'</b>"</a>';
    }
  }
});

Working with loading 

$('.with_loading').goleki({
   source: 'https://api.github.com/search/repositories',
   jsonData: 'items',
   templates: {
      item: function(obj) {
         return '<a style="color: green;">'+ obj.full_name +'</a>';
      },
      loading: $('.el-loading')
   }
});

Local Data 

var localData = [
'Bandung', 'Batu', 'Bekasi', 'Blitar', 'Bogor', 'Cianjur', 'Cilegon', 'Cimahi', 'Cirebon', 'Depok', 'Jakarta', 'Madiun', 'Magelang', 'Malang', 'Mojokerto', 'Pasuruan', 'Pekalongan', 'Probolinggo', 'Salatiga', 'Semarang', 'South Tangerang', 'Sukabumi', 'Surabaya', 'Surakarta', 'Tasikmalaya', 'Tangerang', 'Tegal', 'Yogyakarta', 'Kediri', 'Serang', 'Purwokerto',
];
var localData = $('.local_data').goleki({
  source: localData
});

Events 

$('.event-example').goleki({
  source: 'https://api.github.com/search/repositories',
  jsonData: 'items',
  onSelectItem: function(e, self, $el, obj) {
    e.preventDefault();
    alert(obj.full_name +' is owned by '+ obj.owner.login);
  },
  templates: {
    item: function(obj) {
      return '<a href="'+ obj.html_url +'">'+ obj.full_name +'</a>';
    }
  }
});

Options

Name Type Default Description
source string|object null Your remote url, or local object
sourceParams object null

When you want to custom parameters, you need to tell goleki using input_q
This is example using custom parameters. 

$('.custom_params').goleki({
  source: 'http://awesomedomain.dev/ajax/jiff',
  sourceParams: {
    keyword: 'input_q'
  }
});
jsonData string null Generally api has key that contains result of data, for example take a look an api github. The key for contains result data is items


if you doesn't need this, just leave empty
typeTimeout integer 800 Delay request to api when user type in input.
onSelectItem callback null Event when user select item from autocomplete.

Templates

all below property should set inside template object
item callback <a> Template for each item
loading callback string|object Template for loading text
empty callback string Template for empty text
fail callback string Template for fail contact api
back to top