SSuggestor

react-simple-suggestor (using bootstrap styles)

Demo

Live Demo: carloluis.github.io/ssuggestor

See the Pen ssuggestor-example on CodePen

Instalation

npm install ssuggestor --save

Usage

npm

import React from 'react';
import { render } from 'react-dom';
import SSuggestor from 'ssuggestor';

render(
	<SSuggestor 
		list={['list', 'of', 'string', 'suggestions']}
		onChange={value => console.log(value)}
		placeholder="type something..."
		styles={{width:100}}
		arrow={true}
		close={true}
	/>,
	document.body
);

browser

Include react.js dependency script and ssuggestor.js

<script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/ssuggestor@0.0.25/dist/ssuggestor.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Description

SSuggestor (Simple Suggestor) exports two components:

• SSuggestor: import { SSuggestor } from 'suggestor'
  • default export handles clicks outside of DOM component:
  • import SSuggestor from 'ssuggestor'
• Suggestor: import { Suggestor } from 'ssuggestor'

note: ssuggestor highlights search pattern on suggestions list.

Props:

Property	Type	Default	Description
list	array	--	array of string suggestions (required)
onSelect	func	_ => _	onSelect handler: (current_value) => { }
onChange	func	_ => _	onChange handler: (new_value) => { }
onKey	func	_ => _	onKey handler: (keyEvent) => { }
value	string	''	initial value
className	string	input-group	css classes for component's root element
style	object	undefined	inline styles for component's root element
placeholder	string	''	input placeholder text
tooltip	string	''	input title text (simple tooltip)
suggestOn	number	1	minimum length of search string to show suggestions
openOnClick	bool	true	whether suggestion list opens on click or not
selectOnTab	bool	false	whether suggestion is selected by hit tab key or not
required	bool	false	wheater to set required prop on input element or not
useKeys	bool	true	whether to use keys (up/down, enter, escape, tab) or not
arrow	bool	true	🔻 icon
close	bool	true	❌ icon - deletes current value

Methods

Only has a public method: focus(). It focuses the control input element.

instance.focus();

Bootstrap

SSuggestor uses some bootstrap classes:

input-group, form-control, dropdown-menu and glyphicon (glyphicon-triangle-bottom & glyphicon-remove)

Development

In order to build locally: clone this repo, then run:

npm install
npm run dev

Then open browser on localhost:9000

Links

• ssuggestor github page
• ssuggestor-example
• npm