https://github.com/divyanshu-rawat/autocomplete-package

A autocomplete component for react-application.
https://github.com/divyanshu-rawat/autocomplete-package

autocompletion npm-package package proptypes reactjs

Last synced: 2 months ago
JSON representation

A autocomplete component for react-application.

• Host: GitHub
• URL: https://github.com/divyanshu-rawat/autocomplete-package
• Owner: divyanshu-rawat
• Created: 2018-09-29T11:29:25.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-03T06:02:26.000Z (over 7 years ago)
• Last Synced: 2025-07-07T13:36:49.333Z (12 months ago)
• Topics: autocompletion, npm-package, package, proptypes, reactjs
• Language: JavaScript
• Homepage:
• Size: 241 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# AutoComplete-Package (WIP!)

A autocomplete component for react-application, React.js AutoComplete Component! (WIP!)

[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com)

[![forthebadge](https://forthebadge.com/images/badges/check-it-out.svg)](https://forthebadge.com)

[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)

DEMO - http://divyanshurawat.me/AutoComplete-Package/

Accessible, extensible, Autocomplete for React.js.

```js

 this.setState({ value: value})} />

```

## Table of Contents

* [Installation](#installation)

* [Examples](#examples)

* [API](#api)

## Installation

To Install Use [NPM](https://npmjs.org/)

    $ npm i autocomplete-dropdown

## Examples

* Component can be modified by adding font-awesome and bootstrap to perform mentioned gif.

![Alt Text](https://github.com/divyanshu-rawat/AutoComplete-Package/blob/master/examples/screenshot/dropdown.gif)

Here is a simple example of autocomplete being used in an app with some custom styles and focusable input elements within the autocomplet context.

```js

class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      value: ""

    };

  }

  render() {

    let data_set = data;

    const {

      state: { value }

    } = this;

    return (

      


        


           this.setState({ value: value })}

          />

        


        {value != "" && (

          


            Selected Value: 
{value}

          

        )}

      

    );

  }

}


export default App;

```

## API

Passed Properties.

``` suggestions: Array ```

The items to display in the dropdown menu.

##

SetValue: ```Function```

Default value: ```function() {}```

Arguments: ```value: String, item: Any```

Invoked when the user selects an item from the dropdown menu.

You can run in a local development server using `npm start`.