Simple search results suggestions. The plugin fetches the JSON data given in the source and renders results based on user input.
new SuggestedSearch({
elements: document.querySelectorAll('input'),
source: '/posts',
filterBy: 'title',
resultsToShow: 3,
charsBeforeResults: 3,
resultContainerEl: 'ul',
item: post =>
`<li class="list-item">
<a href="${post.url}">${post.title}</a>
</li>`
});| Option | Description |
|---|---|
| elements | HTML elements to initalize SuggestedSearch on |
| source | URL to data source. JSON format. |
| filterBy | Object key upon which the search input will compare against |
| resultsToShow | Maximum results to show at one time |
| charsBeforeResults | Minimum number of characthers user must type before results start to show |
| resultContainerEl | The HTML element that wraps the search results |
| item | Function that gets mapped over the data item |
This plugin supports IE11 and all evergreen browsers. The code base makes use of ES6 features and uses core-js to polyfill.
If you are not supporting IE11 (I'm jealous), then create a custom build for yourself and remove import './polyfills' from src/index.ts.
Clone this reposity and install the development packages.
# Clone the repo
git clone https://github.com/heychris/suggested-search.git
# Install packages
yarn install
# Start coding
yarn watch
| Command | Description |
|---|---|
| watch | yarn watch will watch for file changes and rebuild the package. It also launches a local server accesible at localhost:10001 |
| build | Builds the package. Entry is src/index.ts. |
| test | Runs Jest tests found in src/tests |