Minimal Autocomplete Library With Support For Remote & Local Data – Pickle Complate

Category: Form , Javascript | June 12, 2020
Author: freakazoid41
Views Total: 381 views
Official Page: Go to website
Last Update: June 12, 2020
License: MIT

Preview:

Minimal Autocomplete Library With Support For Remote & Local Data – Pickle Complate

Description:

Pickle Complate is a really simple autocomplete component for input field that allows to fetch data from local JavaScript array of objects or external JSON data via AJAX requests.

How to use it:

1. Load the picomplete.css for the basic styling of the dropdown suggestion list.

<link href="src/picomplete.css" rel="stylesheet" />

2. Create an input field on which you want to enable the autocomplete functionality. Make sure the form has the autocomplete function switched off.

<input id="demo" type="text" name="language" placeholder="Language" />

3. Load the picomplete.js at the end of the document.

<script src="src/picomplete.js"></script>

4. Initialize the library and define your data as follows:

const instance = new PickleComplate({
      data:[{
        value:'javascript',
        text:'JavaScript'
      },{
        value:'html5',
        text:'HTML5'
      },{
        value:'css3',
        text:'CSS3'
      },{
        value:'jquery',
        text:'jQuery'
      },{
        value:'angular',
        text:'Angular'
      },{
        value:'react',
        text:'React'
      },{
        value:'vue',
        text:'Vue'
      }],
      config: {
        type:'local',
        target: '.picomplete',
        clickCallback:(target,node)=>{
          target.value = node.value;
        }
      }
});

5. Load suggestions from a remote data source.

const instance = new PickleComplate({
      request:{
        url:'https://example.com/rest/language/',
        type:'POST', // or 'get'
        value:'name',
        text:'name'
      },
      config: {
        type:'server',
        target: '.picomplete',
        clickCallback:(target,node)=>{
          target.value = node.value;
        }
      }
});

Changelog:

06/12/2020

  • JS Update

You Might Be Interested In:


Leave a Reply