blsautocomplete

React Native Batch Autocomplete Lib

React native component for easily use React native Batch Autocomplete

Getting started

Use the component!

import AutoComplete from 'blsautocomplete';

const Component = () => (

// Recent search data should be in below format
const suggetions = [
    {
      created_at: '2021-03-06 12:19:25',
      id: 915,
      is_deleted: 0,
      last_searched_at: '2022-02-12 05:12:51',
      search_text: 'New York, NY, USA',
      user_id: 100000239,
    },
    {
      created_at: '2022-02-10 12:24:41',
      id: 3257,
      is_deleted: 0,
      last_searched_at: '2022-02-12 04:54:16',
      search_text: '3510 Shallowford Rd, Atlanta, GA 30341, USA',
      user_id: 100000239,
    },
  ];

  const handleError = (e) => {
    // Handle error as you want
    console.log('Error while searching: ',e);
  }

  const onFocus = () => {
    // handle data on focus
    console.log('on focus: ');
  }

  const onBlur = () => {
    // handle data on blur
    console.log('on blur: ');
  }

  const onSelect = (data) => {
    // Do Your Execution with data
    console.log('Seleted item: ', data)
  }

 return(
        <AutoComplete
            inputContainer={} // Input container style
            notFoundText = 'No Data Found!'
            debounceTime = {700}
            container = {} // container style
            textInputStyle = {} // text input style
            isShowRecentSearch = {false} // show recent search
            handleError={handleError}
            onSelect={onSelect}
            domainServer="DOMAIN_SERVER" //required
            apiKey="API_KEY" //required
            recentSearchData={suggetions}
            suggestionIcon={renderSuggestionIcon}
            clearIcon={renderClearIcon}
            clearIconContainer={}  // clear icon button container style
            suggestionContainer={} // suggestion container style
            suggestionText={} //suggestion text style
            suggestionHighlightedText={} //suggestion text matched with input text (style)
            suggestionContentContainer={} //suggestion main content container style
            onFocus={onFocus}
            onBlur={onBlur}
            textInputProps={{ //control text input
            maxLength: 5,
            placeholder: 'Enter text here...!',
            placeholderTextColor: 'gray',
            }}
            take={5} //  It is optional and the default value is 5. e.g. => If the user passes take=10 then it will display 10 records for auto-complete address list.
            displayData='name' // display data in text input | This option will take only 5 values which is 'state', 'address' , 'name' , 'zip' , 'city' and default value is name
            />
            showNotFound={false} //It takes two values true and false default value is true
            notFoundTextStyle={{
              fontWeight: 'bold'
            }}
 );
);

export default Component;

• Here recentSearch and styles are fully optional.