August 8, 2022

An Autocomplete Component Built With Pure JavaScript | Pickle Complete

Pickle Complete is an autocomplete component written as completely pure JavaScript that allows data to be fetched from a local JavaScript set of objects or external JSON data via AJAX requests.

autocomplete js plugin, typeahead large dataset, awesomplete, responsive autocomplete dropdown, autocomplete css, textarea autocomplete javascript

How to make use of it:

1. Load the picomplete.css for the fundamental styling of the dropdown suggestion listing.

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

2. Create an input subject on which you need to allow the autocomplete functionality.

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

3. Load the picomplete.js on the finish of the doc.

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

4. Initialize the library and outline 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 options from a remote information 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;
        }
      }
});

6. More callbacks.

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;
        }
      },
      reqCallback : (data) => {
        data.stitle = data.value;
        delete data.value;
        return data; //return new data to post request
      },
      changeCallback : (e,value) => {
        //element keyup callback
        //e => element
        //value => input value
     }
});

Minimal Autocomplete Library With Support For Remote & Local Data, Pickle Complete Plugin/Github


See Demo And Download

Official Website(freakazoid41): Click Here

This superior jQuery/javascript plugin is developed by freakazoid41. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.