sk-autosuggest

npm install --save sk-autosuggest

Usage no npm install needed!

<script type="module">
  import skAutosuggest from 'https://cdn.skypack.dev/sk-autosuggest';
</script>

README

React AutoSuggest Component

Installation

npm install --save sk-autosuggest

or

yarn add sk-autosuggest

How To Use

First import this component where you want to use it

import AutoSuggest from "sk-autosuggest"

Props

Prop Description Default value
data List of results []
label Name on Input 'Select'
showClearIcon Boolean to show clear Icon true
fieldName Name of the field to display in results name
placeholder placeholder to display in input 'Type here...'
handleOnValueSelected handler to get the data on selecting the result -

Example

import React, { Component } from "react";
import AutoSuggest from "sk-autosuggest";
import 'sk-autosuggest/dist/AutoSuggest.css';

class App extends Component {
  render() {
    const data = [
      {
        "id":"7400",
        "employee_name":"elrdfafa",
        "employee_salary":"32432",
        "employee_age":"234234",
        "profile_image":""
      },
      {
        "id":"7402",
        "employee_name":"Laurent Tumpane",
        "employee_salary":"38342",
        "employee_age":"34",
        "profile_image":""
      },
      {
        "id":"7404",
        "employee_name":"Christophorus MacManus",
        "employee_salary":"78211",
        "employee_age":"40",
        "profile_image":""
      }
    ];
    return (
      <AutoSuggest
        data={data}
        fieldName="employee_name"
        showClearIcon
        label="Employee Name"
        placeholder="Type here..."
      />
    );
  }
}

export default App;