https://github.com/jacklam718/autocompletejs

A simple and extendable and no jQuery required JavaScript library for autocomplete
https://github.com/jacklam718/autocompletejs

Last synced: 3 days ago
JSON representation

A simple and extendable and no jQuery required JavaScript library for autocomplete

• Host: GitHub
• URL: https://github.com/jacklam718/autocompletejs
• Owner: jacklam718
• License: mit
• Created: 2015-12-21T11:55:52.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-09-13T13:29:31.000Z (over 7 years ago)
• Last Synced: 2024-12-28T13:17:28.426Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 35.2 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# AutocompleteJs

A simple and extendable and no jQuery required JavaScript library

# Demo



  LIVE DEMO



# Usage

### import the library in your HTML template of script tag

```html

```

### OR

### if you using browserify you can use ```require```

```javascript

var Autocomplete = require('autocompletejs');

```

### OR

### ES6 import

```javascript

import Autocomplete from 'autocompletejs';

```

```javascript

// pass query selector to library

var elementId = '#autocomplete';

var autocomplete new Autocomplete(elementId);

```

```javascript

// or pass DOM element to library

var inputElement = document.querySelector('#autocomplete');

var autocomplete new Autocomplete(inputElement);

```

# Example

### in your HTML template

```html

```

### in your JavaScript

```javascript

var elem = document.querySelector('#autocomplete');

var autocomplete = new Autocomplete(elem);

var data = [

  {name: 'The Wolverine'},

  {name: 'The Smurfs 2'},

  {name: 'The Mortal Instruments: City of Bones'},

  {name: 'Drinking Buddies'},

  {name: 'All the Boys Love Mandy Lane'}

];

autocomplete.setData(data);

autocomplete

  .on(autocomplete.ON_INPUT, function(data) {

    // will call when on input

  })

  .on(autocomplete.ON_SELECT, function(suggestion) {

    // will call when selected suggestion item

  })

  .on(autocomplete.ON_MOUSEOVER, function(index) {

    // will call when mouse over suggestion item

  })

  .on(autocomplete.ON_ELEMENT_CREATED, function(suggestionsElement) {

    // will call when the suggestions element container created

  })

  .on(autocomplete.ON_ELEMENT_REMOVED, function() {

    // will call when the suggestions element container removed

  });

```

##### if your data and the suggestions list is from server side, you can do this:

```javascript

// the following just a example, you can use any ways to fetch data from server side

// in this case you don't need to call `setData` method

var elem = document.querySelector('#autocomplete');

var autocomplete = new Autocomplete(elem);

$.ajax({

  dataType: "json",

  url: 'url/data',

  data: {queryText: 'the keyword'},

  success: function(suggestions) {

    // the suggestions fetch from server side, then just directly pass the suggestions to `setSuggestionsAndCreateElement` method

    autocomplete

      .setSuggestionsAndCreateElement(suggestions);

  }

});

```

# TODO

- [ ] Test case

- [ ] Fetch data from server (because the suggestions list may be stored in server)