❤
npm
Sign UpSign In

autocomplete-ts

1.1.1 • Public • Published

Autocomplete-ts

Advanced React based autocomplete library. Similar to Google's autocomplete.

License: MIT npm version Build Status PRs: Welcome

Demo GIF

Features

  • Lightweight
  • Supports React
  • Dependency-free
  • Support for typescript
  • Easy Configurable and use

Core Features

  • Quick auto suggestion (under 5 ms for a set of 4000 keywords)
  • Adding server generated suggestions (NLP based model etc.)
  • WAI ARIA support for accessibility (adding more)
  • Strict Type checks and declarations for typescript

Quick Start

Installation

Download and install via npm package manager

npm i autocomplete-ts
// import like this
import AutoComplete from  'autocomplete-ts';
 
// or like this
const autoComplete = require('autocomplete-ts');
 
const countries = ['Australia', 'China', 'Denmark', 'India', 'Russia', 'South Africa', 'USA'];
 
// render method
render() {
    return <AutoComplete  suggestList={countries}  />
}

Add this css to your project:

:root {
    --ac-ts-input-height:  25px;
    --ac-ts-input-width:  300px;
    --ac-ts-input-fontSize:  .9em;
    --ac-ts-input-suggest-color:  #bbb;
    --ac-ts-input-suggest-bgColor:  #fff;
    --ac-ts-input-color:  #333;
    --ac-ts-input-active-bgColor:  #fff;
    --ac-ts-input-disabled-bgColor:  #ccc;
    --ac-ts-input-border-focus:  inherit;
    --ac-ts-input-padding:  5px;
    --ac-ts-input-borderRadius:  5px;
    --ac-ts-input-border:  1px  solid  #ccc;
}
 
.autocomplete--fill-input  .autocomplete--input-suggestion {
    background-color:  var(--ac-ts-input-suggest-bgColor);
    position:  absolute;
    z-index:  -10;
    color:  var(--ac-ts-input-suggest-color);
}
 
.autocomplete--fill-input  .autocomplete--input-suggestion:disabled {
    background-color:  var(--ac-ts-input-disabled-bgColor);
}
 
.autocomplete--fill-input  .autocomplete--input-active {
    background-color:  transparent;
    color:  var(--ac-ts-input-color);
    z-index:  10;
}
 
.autocomplete--fill-input  .autocomplete--input-active:disabled {
    background-color:  transparent;
}
 
.autocomplete--fill-input  .autocomplete--input-active:focus {
    border-color:  var(--ac-ts-input-border-focus);
}
 
.autocomplete--fill-input  .autocomplete--input-suggestion,
.autocomplete--fill-input  .autocomplete--input-active {
    padding:  var(--ac-ts-input-padding);
    border:  var(--ac-ts-input-border);
    height:  var(--ac-ts-input-height);
    width:  var(--ac-ts-input-width);
    font-size:  var(--ac-ts-input-fontSize);
    border-radius:  var(--ac-ts-input-borderRadius);
}

Contributing

I've just started out with this library and plan to incrementally add tests and other functionality which the community will ask for. I'll be spending the next few weeks solely to this project to achieve that. Hard Core mode on 🔥

Tests would be based on Jest and can be run with npm run test

To build the library run npm run build

Further

I'll be dedicating a website with an indepth docs and code sandboxes to use this library. In the meantine, feel free to raise bugs or request for feature/enhancements. Please follow proper guidelines to do so. Cheers 😁

Readme

Keywords

Package Sidebar

Install

npm i autocomplete-ts

Repository

github.com/shra1dhar/autocomplete-ts

Homepage

github.com/shra1dhar/autocomplete-ts#readme

Weekly Downloads

12

Version

1.1.1

License

MIT

Unpacked Size

13.7 kB

Total Files

7

Last publish

Collaborators

  • shra1dhar
Try on RunKit
Report malware