https://github.com/yujinlim/react-autocomplete

https://github.com/yujinlim/react-autocomplete

Last synced: 15 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/yujinlim/react-autocomplete
• Owner: yujinlim
• License: mit
• Created: 2015-04-17T04:36:23.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-05-25T04:23:41.000Z (over 9 years ago)
• Last Synced: 2024-11-07T18:03:56.562Z (2 months ago)
• Language: JavaScript
• Size: 1.46 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-autocomplete (combobox) 

> Moving from [rackt/react-autocomplete](https://github.com/rackt/react-autocomplete).

[WAI-ARIA][wai-aria] accessible [React][react] autocomplete component (combobox).

Installation

------------

`npm install react-autocomplete`

WIP

---

This is not production ready, but I welcome use-cases opened in the

issues :)

Demo

----

http://rackt.github.io/react-autocomplete/example/

Usage

-----

```js

var Autocomplete = require('react-autocomplete');

// its actually called a combobox, but noboby searches for that

var Combobox = Autocomplete.Combobox; 

var Option = Autocomplete.Option;

var comboboxinItUp = (

  // Just like , this component is a

  // composite component. This gives you complete control over

  // What is displayed inside the s as well as allowing

  // you to render whatever you want inside, like a "no results"

  // message that isn't interactive like the  are.

  // Start with the  and give it some handlers.

  

    // `onInput` is called when the user is typing, it gets passed the

    // value from the input. This is your chance to filter the Options

    // and redraw. More realistically, you'd make a request to get data

    // and then redraw when it lands.

    //

    // `onSelect` is called when the user makes a selection, you probably

    // want to reset the Options to your full dataset again, or maybe

    // deal with the value and then clear it out if this is used to

    // populate a list.

    //

    // `autocomplete` defaults to 'both'. 'inline' will autocomplete the

    // first matched Option into the input value, 'list' will display a

    // list of choices, and of course, both does both.

 

    // When this option is selected, `onSelect` will be called with the

    // value `"foo"`.

    Foo

    // `label` is the text to display in the input when the Option is

    // selected. It defaults to the content of the Option just like a

    // real . (Maybe the value should too, now that I'm writing

    // this, but it doesn't yet)

    Bar

  

);

```

This is not realistic code, check out the examples directory for a real

implementation.

  [wai-aria]:http://www.w3.org/TR/wai-aria/roles#combobox

  [react]:http://facebook.github.io/react/