diff --git a/README.md b/README.md index d0dfd76..64b386c 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,22 @@ Compatible with - Vue - Angular +### Contents + +- [Installation](#installation) + - [Via cdn](#install-via-cdn) + - [Via npm](#install-via-npm) +- [Usage](#usage) + - [Javascript](#javascript) + - [Typescript](#typescript) + - [Usage with API](#usage-with-api-call) +- [Options](#available-options) +- [Functions](#available-functions) +- [Theme](#theme) + - [Custom Theme](#custom-theme-color) + +### Installation + #### Install via cdn ```html @@ -95,6 +111,33 @@ const searchJs = SearchJS(config) searchJs.open() ``` +#### Usage with API call + +```js +async function getFromApi(keyword = '') { + let res = await fetch('https://dummyjson.com/products/search?q=' + keyword) + let json = await res.json() + return json.products +} + +const searchJs = SearchJS({ + theme: '#FF2E1F', + width: '600px', + darkMode: false, + positionTop: '50px', + data: [], + search: { + placeholder: 'Search products', + }, + onSelected: (route) => { + console.log(route) + }, + onSearch: (keyword) => { + return getFromApi(keyword) + }, +}) +``` + #### Available Options | **Name** | **Required** | **Description** | @@ -138,33 +181,6 @@ searchJs.open() ##### Dark Theme with color code -#### Sample code with API call - -```js -async function getFromApi(keyword = '') { - let res = await fetch('https://dummyjson.com/products/search?q=' + keyword) - let json = await res.json() - return json.products -} - -const searchJs = SearchJS({ - theme: '#FF2E1F', - width: '600px', - darkMode: false, - positionTop: '50px', - data: [], - search: { - placeholder: 'Search products', - }, - onSelected: (route) => { - console.log(route) - }, - onSearch: (keyword) => { - return getFromApi(keyword) - }, -}) -``` - #### Custom theme color Override below css variables for custom theme color. diff --git a/package.json b/package.json index b0f6340..0cb9805 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bilions/search-js", - "version": "0.5.1", + "version": "0.5.2", "description": "Instance search UI component", "main": "dist/index.js", "scripts": {