React Search Component

A Search component built with React that features:

• Random auto-completion results based on what the user typed.
  • Result item has user query highlighted.
• Unicode characters for icons (no image dependencies).
• Random simulated request times for:
  • Auto-completion results
  • Suggestion results
• Once suggestions have loaded, their results are cached for snappier hover times.
• Accessibility (all items can be navigated to and interacted with via the keyboard).
• Responsive
  • A majority of the CSS utilizes ems.
  • Suggestion results scroll when the viewing frame is smaller than the list.

---

Installation

npm i -dd

---

Run

To compile and start a webpack server

npm start

Navigate to http://localhost:8080/webpack-dev-server/. Notice that the bundle isn't written to the file system, but rather served from memory via the publicPath prop in webpack.config.js.

To just compile

npm run compile

# to watch for changes
npm run compile -- -w

You can then navigate to public/ and open index.html in a browser. You'll notice without the WebPack server the bundle is actually output to the file system and is much smaller.