Static Data

  options: {
    placeholder: 'Select Value',
    searchCount: 3,
    data: {
      schema: {
        key: 'id',
        text: 'searchText'
      },
      content: [
        {
          id: 1,
          searchText: "Duis ipsum id aliqua in amet eu aute",
        },
        {
          id: 2,
          searchText: "Incididunt eiusmod deserunt voluptate laborum",
        },
      ],
      searchCriteria: 'startsWith'
    }
  }

  
  <ReactSearchAutocomplete
    options={constantDataOptions}
    onSelection={onSelection}
    onInput={onInput}
  />
  

Static Data with debounce

  options: {
    placeholder: 'Select Value',
    searchCount: 3,
    debounceDelay: 1000,
    data: {
      schema: {
        key: 'id',
        text: 'searchText'
      },
      content: [
        {
          id: 1,
          searchText: "Duis ipsum id aliqua in amet eu aute",
        },
        {
          id: 2,
          searchText: "Incididunt eiusmod deserunt voluptate laborum",
        },
      ],
      searchCriteria: 'startsWith'
    }
  }

  
  <ReactSearchAutocomplete
    options={constantDataOptions}
    onSelection={onSelection}
    onInput={onInput}
  />
  

Custom CSS Options

options: {
    classNames: {
      search: null, //string
      input: null, //string
      list: null, //string
      listItem: null, //string
    },
    style: {
      width: null, //number
      height: null, //number
      fontSize: null, //number
      fontWeight: null, //number
      fontFamily: null, //number
      margin: null, //number
      marginTop: null, //number
      marginBottom: null, //number
      marginLeft: null, //number
      marginRight: null, //number,
      input: {
        textIndent: null, //number
        padding: null, //number
        paddingTop: null, //number
        paddingBottom: null, //number
        paddingLeft: null, //number
        paddingRight: null, //number
      },
      listItem: {
        height: 0, //number
        padding: 0, //number
        paddingTop: null, //number
        paddingBottom: null, //number
        paddingLeft: null, //number
        paddingRight: null, //number
        margin: null, //number
        marginTop: null, //number
        marginBottom: null, //number
        marginLeft: null, //number
        marginRight: null, //number
      },
    }
  }


  <ReactSearchAutocomplete options={options} />
  

Save

Search with highlight text

  options: {
    placeholder: 'Select Value',
    searchCount: 3,
    highlightSearch: true,
    data: {
      schema: {
        key: 'id',
        text: 'searchText'
      },
      content: [
        {
          id: 1,
          searchText: "Duis ipsum id aliqua in amet eu aute",
        },
        {
          id: 2,
          searchText: "Incididunt eiusmod deserunt voluptate laborum",
        },
      ],
      searchCriteria: 'startsWith'
    }
  }

  
  <ReactSearchAutocomplete
    options={constantDataOptions}
  />
  

Search with promise data

  options: {
    placeholder: 'Select Value',
    searchCount: 3,
    highlightSearch: true,
    data: {
      schema: {
        key: 'id',
        text: 'title'
      },
      task: responseTask, //promise which return data when resolved
      searchCriteria: 'startsWith'
    }
  }

  
  <ReactSearchAutocomplete
    options={constantDataOptions}
  />