This is a react atuocomplete component with a built in input box.

Guide

This component takes a total of 4 props, 2 mandatory and rest optional. The props are,

1. suggestions: This is the array of items to be suggested. This can be primitive array of strings such as

       const suggestions = ['mango', 'apple', 'strawberry'];

   but the detailed object format would be,

       const suggestions = [
           {
             id: 'bgd',
             text: 'Bangladesh',
             sub: 'South Asia',
               img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Flag_of_Bangladesh.svg/1200px-Flag_of_Bangladesh.svg.png'
           },
           {
             id: 'ind',
             text: 'India',
             sub: 'South Asia',
             img: 'https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1200px-Flag_of_India.svg.png'
           },
           {
             id: 'pks',
             text: 'Pakistan',
             sub: 'South Asia',
             img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSJTlfUBGgU7BcdQRBaSSR7ttosxQ25mU-big&usqp=CAU'
           }
       ]

   here, text: the primnary text displayed in bold sub: secondary text, shown in gray, optional img: link to the logo, optional id: whenever an item is selected, the dropdown closes automatically, displays the selected title in the input returns the corresponding id to the parent. id is mandatory until the useTextAsId flag is marked true.

2. getSelected: Function that returns the id of the selected item. Should be defined in the parent and passed as prop.

       const getSelected = item => {
           console.log(item)
           //process item as any string
       }

3. useTextAsId (optional): The component expects atleast two properties for each element of the suggestions array and these are text and id. However if user wants to use same string for both text and id, such is when any fruit apple is selected the package should return the same string apple, they can mark pass this prop as useTextAsId={true}. This should also be passed when a primitive array of strings is used in suggestions array.

4. anywhere (optional): The filtering in general cases excludes suggestions for which the prefix doesn't match to reduce traffic. For example, when a is typed, the suggestions for countries will display Algeria but not Bangladesh even though the word Bangladesh contains two instances of a. To gain this facility, that is to suggest items no matter where they contain the typed phrase, anyhwhere={true} must be passed as props.

A call from the parent

    import Autocomplete from 'autocomplete'
    
        const suggestions = [
        {
          id: 'bgd',
          text: 'Bangladesh',
          sub: 'South Asia',
            img: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Flag_of_Bangladesh.svg/1200px-Flag_of_Bangladesh.svg.png'
        },
        {
          id: 'ind',
          text: 'India',
          sub: 'South Asia',
          img: 'https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1200px-Flag_of_India.svg.png'
        },
        {
          id: 'pks',
          text: 'Pakistan',
          sub: 'South Asia',
          img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSJTlfUBGgU7BcdQRBaSSR7ttosxQ25mU-big&usqp=CAU'
        }
    ]
    
    const getSelected = item => {
        console.log(item)
        //process item as any string
    }
    
    return (
        <Autocomplete suggestions={suggestions} getSelected={getSelected} />
    )