Basic Dynamic Autocomplete Library – pc-autocompletion.js

Preview:

Description:

pc-autocompletion.js is a small JavaScript autocomplete plugin that works with text field and supports dynamic data rendering.

How to use it:

Create an input field on the webpage.

<input placeholder="Type Something" id="example" type="text">

Create an array of JS objects that hold key-value pairs for the suggestions.

var myDare = new Array({
    id: 1,
    name: 'Banana',
    price: 4000
}, {
    id: 2,
    name: 'Grape',
    price: 12000
}, {
    id: 3,
    name: 'Durian',
    price: 25000
}, {
    id: 4,
    name: 'Coconut',
    price: 10000
},{
    id: 5,
    name: 'Apel',
    price: 7500
},{
    id: 6,
    name: 'Apel Premium',
    price: 15000
},{
    id: 7,
    name: 'Rambutan',
    price: 8500
});

Initialize the pc-autocompletion library and done.

new PCAutoCompletion({
    id: 'example',
    itemList: myData,
    showElement: 'name'
}