Code Monkey home page Code Monkey logo

react_autocomplete's Introduction

React Autocomplete

You have an array of people. Implement the Autocomplete component using Bulma Dropdown that will suggest people matching an entered text.

  • suggestions should appear after some delay in typing (debounce);
  • the delay should be customizable via props (default value is 300ms);
  • show the list of all people when input is focused but empty (Check this to see how it can work)
  • show No matching suggestions message if there are no people containing the entered text;
  • don't run filtering again if the text has not changed (pause in typing happened when the text was the same as before)
  • hide suggestions on text change;
  • save selected suggestion text to the input on click and close the list;
  • pass selected person to the onSelected callback passed via props;
  • add an h1 to the App showing Name (born - died) of the selected person or No selected person.

Instructions

Troubleshooting

If you have got an error during npm install like this (when it tries to install node-sass):

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Solutions:

  • Install sass library instead of node-sass:
  npm uninstall node-sass
  npm install sass --save-dev
  • Alternative solution is to install node-sass@npm:sass version:
  npm install node-sass@npm:sass --save-dev

react_autocomplete's People

Contributors

bohdan-maksymiuk avatar marina-tilniak avatar mgrinko avatar mhrynko avatar mykhalenych avatar sergii-nosachenko avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.