Autocomplete component created with pure javascript

Overview

Pickle Complete

Pickle complate is a autocomplate component written as completely pure javascript. Just send json object or request information have fun again ! :-D

Pickle complate does't need anything except you !

Badges Falan

  • Simple javascript ability
  • Simple css ability for some style editing for your project

Initiation And Using Example

Initiate like this (not serverside) :

const pc = new PickleComplate({
      data:[{
        value:'Turkey',
        text:'Türkiye'
      },{
        value:'Russia',
        text:'Rusya'
      },{
        value:'Germany',
        text:'Almanya'
      },{
        value:'Italia',
        text:'İtalya'
      },{
        value:'France',
        text:'Fransa'
      }],
      config: {
        type:'local',
        target: '.picomplete',
        clickCallback:(target,node)=>{
          target.value = node.value;
        }
      }
    });

Initiate this for serverside :

const pc = new PickleComplate({
      request:{
        url:'https://yourapiaddress.com',
        type:'POST',
        value:'name',//target value key
        text:'name',//target text key
        params:{
             exkey:'exvalue' //example post parameter
        }
      },
      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
       }
    });

You can use 'POST' or 'GET' for serverside.


Installation

  • Just include js and css file to your project then you can use it

Clone

  • Clone this repo to your local machine using https://github.com/freakazoid41/pickle_complete.git
You might also like...

This simple project, show how work with async Fetch, function component and class component

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Feb 17, 2022

dynamic-component-app is an angular application for dynamic component template creation

MyApp This project was generated with Angular CLI version 14.1.0. Development server Run ng serve for a dev server. Navigate to http://localhost:4200/

Aug 26, 2022

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

2FA-Solver A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes. It can be used as an offline web page b

Dec 7, 2022

Adds `swiped` events to the DOM in 0.7k of pure JavaScript

Adds `swiped` events to the DOM in 0.7k of pure JavaScript

swiped-events A 0.7k script that adds swiped-left, swiped-right, swiped-up and swiped-down events to the DOM using CustomEvent and pure JS. Based on t

Jan 8, 2023

Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance.

parallax-vanilla.js Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra perfo

Dec 16, 2022

Unique guid generator pure Javascript.

Guid Generator Create unique Guids. Usage For client Javascript import { Guid } from "../src/guid"; Guid.NewGuid(); // 1q6G3w1U-8F0D-8p9R-7m6m-5b5B7G

Nov 1, 2022

Runtime type checking in pure javascript.

Install npm install function-schema Usage import { signature } from 'function-schema'; const myFunction = signature(...ParamTypeChecks)(ReturnValueCh

May 30, 2022

Tempo is an easy, intuitive JavaScript rendering engine that enables you to craft data templates in pure HTML.

Tempo 2.0 Tempo is an easy, intuitive JavaScript rendering engine that enables you to craft data templates in pure HTML. Why use Tempo? Clear separati

Jan 3, 2023

Adds `long-press` event to the DOM in 1k of pure JavaScript

long-press-event A 1k script that adds a long-press event to the DOM using CustomEvent and pure JavaScript. Works in IE9+, Chrome, Firefox, Safari as

Jan 2, 2023
Owner
Kadir Barış Bozat
Software Developer
Kadir Barış Bozat
Lightweight vanilla js modal component (just 2kb) , pure javascript Modal

Lightweight vanilla js modal component (just 2kb) pure javascript Modal , This is just 2kb Lightweight vanilla js modal component with zero dependenci

Salah Eddine Lalami 12 Dec 12, 2022
DateTimePickerComponent is a very lightweight and dependency-free web component written in pure JavaScript

DateTimePickerComponent Description DateTimePickerComponent is a very lightweight (just over 20KB) and dependency-free web component written in pure J

null 14 Dec 24, 2022
📝 A multiselect component in Pure JS - Compatible with IE11

Iconic Multiselect A multiselect component written in pure JavaScript - Also compatible with IE11 Default template: Custom template: ?? Try live demo

Sidney Wimart 8 Aug 31, 2022
Obsidian plugin that adds autocomplete and auto-formatting to frontmatter tags.

Obsidian Front Matter Tag Wizard Tired of having to type # to get tag autocompletion in your Obsidian note front matter? I feel your pain. This plugin

Eric 10 Nov 5, 2022
Autocomplete für YForm Tabellen

?? WIP REDAXO-Addon: YForm Autocomplete Dieses Addon ermöglicht, Felder einer YForm-Tabelle über eine weitere automatisiert zu befüllen. Features Todo

Thorben 2 Jun 17, 2022
Autocomplete for HTMLTextAreaElement and more.

Textcomplete Autocomplete for HTMLTextAreaElement and more. Document. Packages Textcomplete consists of subpackages: Name Description @textcomplete/co

Yuku Takahashi 1.7k Dec 28, 2022
Autocomplete, diagnostics, hover info & more for the Wally package manager

Wally Utilities This VSCode extension provides some nice-to-haves when using the Wally package manager. The extension can be downloaded from the Visua

Filip Tibell 4 Jul 28, 2022
autocomplete/typeahead js plugin for bootstrap v5

bootstrap-5-autocomplete This is a rewrite of https://github.com/Honatas/bootstrap-4-autocomplete for bootstrap v5. Example const ac = new Autocomplet

Evgeny Zinoviev 76 Dec 28, 2022
Email Genie Allows autocomplete on email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.).

Allows users to easily and quickly complete an email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package stands out for its flexibility, its compatibility with libraries / frameworks, but especially its use of basic HTML and Javascript functionalities that maximize the native behavior of desktop AND mobile browsers.

Simon Arnold 3 Oct 4, 2022
jQuery plugin for fuzzy search in autocomplete

fuzzycomplete jQuery plugin for fuzzy search in an autocomplete form, which uses Fuse.js. By harnessing the flexibility Fuse.js, this plugin allows yo

null 14 Nov 1, 2021