sickdyd/react-search-autocomplete

A search box that filters the provided array of objects

Hi there 👋

I'm a Full Stack Developer working in Osaka, Japan. I have been working as a web developer since 2004.

I'm contribuiting with a few NPM packages to the Open Source Community, feel free to check them out and give me some feedback!

Did you know? I am also a Certified Kubernetes Administrator 🙂

📫 [email protected]

react-search-autocomplete's Issues

How to trigger onSearch event when emptying all the text in the search box?

Currently looks like the onSearch callback is not triggered when emptying all the text by using backspace (instead of triggering the onClear) in the search box. Is it able to allow that to be configurable? Thanks.

How to trigger event pressing Enter key on search

Hi I'm using ur package but I can't handle the event press enter key, Do you have any suggestions for me?

How to change the items based on the search string and call the API?

Hi,

I will need to change the items based on the search string and call the API. For example, when I type "cof", I will need to pass the search string "cof" to an API and get the results from the API and set the results to items. When I type "cha", I will need to pass the search string "cha" to an API and get the results from the API and set the results to items.

May I know how to do it? Thanks!

Error while setting z-index in styling property

Below error is thrown when wanted to set z-index property in styling

Module not found: Can't resolve 'html2canvas/dist/types/css/property-descriptors/z-index'

Encountered two children with the same key Warning

Hello,
Thank you for the great component and features. I am trying to search an array that has a name field with duplicates (unique by an _id field)
I want the search to list the duplicates but i am getting the following Warning. Is it something wrong i am implementing or the component does not support duplicates in the name key?

Warning: Encountered two children with the same key, rsa-result-undefined. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
in ul (created by Results)
in div (created by Context.Consumer)
in StyledComponent (created by styled.div)
in styled.div (created by Results)
in Results (created by ReactSearchAutocomplete)

Search list display horizontally

Hello,

First of all thank you for this wonderful component and for your responsiveness to the issues!

I am trying to use your component in my project. It seems to work perfectly but I have a problem with the results list that i don't understand : It it unfolds horizontally (on one single line) unlike in the demo, and I can't find any prop that can change this.
Have I done something wrong?

I don't have any warning or error about that

Updating `items` prop causes search list to pop up (after item selected)

I'm not sure this is supposed to happen. Suppose I had a simple component:

import React from 'react';
import { ReactSearchAutocomplete } from 'react-search-autocomplete';

import './App.css';

const AssetSearch = ({ setAssetCallback }) => {
	const [assetList, setAssetList] = React.useState([])

	React.useEffect(() => {
		const refreshData = () => {
			const data = [{
				id: 0,
				name: "babooka",
			}, {
				id: 3,
				name: "melon",
			}, {
				id: 5,
				name: "bazoonka",
			}, {
				id: 6,
				name: "pop",
			}];
			setAssetList(data);
		};
		refreshData();
		setInterval(refreshData, 10 * 1000);
	}, []);

	return <ReactSearchAutocomplete
		items={assetList} onSelect={item =>
			setAssetCallback(item.name)}
		fuseOptions={{
			shouldSort: true,
			threshold: 0.6,
			location: 0,
			distance: 100,
			maxPatternLength: 32,
			minMatchCharLength: 1,
			keys: [
				"name",
				"id",
			],
		}}
		placeholder="ID/name" />;
};

const App = () => {
	const [asset, setAsset] = React.useState(null);

	return (
		<div className="App">
			<AssetSearch setAssetCallback={setAsset} />
			Asset selected: {!asset ? "none" : asset}
		</div>
	);
}

export default App;

The first time items is set on the component, the search suggestions don't pop up unless we focus on the component, which is expected behavior. But once we select an item and wait for 10 seconds, the callback to refresh the data fires, items is re-set, and the search suggestions pop up again.

Is there any way to disable this behavior?

Thanks

clearable icon for search input

Do we have option to show or hide clearable cross icon for search input ?

RTL Support

Hey, I will be quite good to have RTL support as currently in RTL mode, margin are narrowed down.

On Focus Default Item Should Be Display

I want to show default item list on focus. Is it possible ?

How to auto hover over the first result?

Hey this library's really great!

Just a question though - how can I make the first result highlighted by default so that when I press enter, that result gets selected automatically? I'd also like to navigate using arrow keys, so similar issue here as #26 as well.

Thanks!

README improvement - id is mandatory

I recommend adding to the README that id is a mandatory field (otherwise there's a React bug due to key-field conflicts).
p.s. awesome gadget! easy to setup and works great

How to detect empty input?

Hello, I am using this library for handling autocomplete, but I would like to disable the search button when no input, but I find out when there is no input , it will not trigger handleOnSearch. Any solution? Thanks

how to set the search result to input background with silver color to suggest user complete it? like google drive search input

How to overlay a component result 'react-search-autocomplete' on top of another component's element?

Hi everybody?
How to overlay a component result 'react-search-autocomplete' on top of another component's element?
I get a error .

Question about Key Down Event Listener

Hello @sickdyd !

First, I'd like to thank you very much for this great component that I love !

I'm new to development, so it would probably sound like a silly question, but please:

how to access the filtered list of results pressing the down key ?

I think I've understood there's an array called "results" which contains this filtered list but I cannot figure out how to access it.

If I knew how to do it, I think I would understand how:

• to browse the filtered list with the up key and obviously the down key
• select an item pressing the enter key

Then, maybe I would need some extra help to style the results lines while browsing them 😅

Thanks!
Arthur

Types

Is there currently / will there be an effort to convert to typescript / adding a .d.ts?

formatResult return more data in the search

Hello community, is it possible to return the name + category + date + ..keys in the view?

How to add Arrow key navigation to navigate to the results.

How to add Arrow key navigation to navigate to the results.

Consider removing onMouseDown

Hi,
thank you for the work and the good library.
I have one improvement to suggest. Is it possible to remvoe the onMouseDonw here https://github.com/sickdyd/react-search-autocomplete/blob/master/src/components/Results.tsx#L54
Because with mouse down you also select via every other click then a normal left click. I think this is not intuitive.
I don't know if this would have any side effects but I would consider it as the normal behaviour.
Thanks
Philipp

Function formatResult only return one field, how to get full data from this

How to I can get full objet data in this function. it only return item is name. I want to get full data item = {name:"", image:"abc", etc...}
const formatResult = (item) => {
return item;
// return (<p dangerouslySetInnerHTML={{__html: ''+item+''}}>

); //To format result as html
}

How can we apply enter keyword Search

If I use the method like

const handleKeyUp = (e) => {
console.log("event: ", e);
if (e.charCode === 13 || e.key === "Enter") {
console.log(Enter$, e);
handleOnSearch();

}

};

is it possible to work in this module

Allow hiding search icon in results list

Can you add an easy way to hide the search icon in the search results please?

Zindex error for this component

Hello,

I want to see myCompnentReactSearchAutocomplete in my front but it is blocked by an other.
Please, see the join.

Thanks you very much

Using showClear causes TypeError when selecting result

Hello,

I'm currently trying to implement this module in a react project with typescript. Whenever showClear is set to true, it breaks the functionality of the module. When I click on a search result the following error is thrown:

Uncaught TypeError: searchString is undefined
    ClearIcon ClearIcon.js:39
    React 12
    unstable_runWithPriority scheduler.development.js:468
    React 17
    tsx index.tsx:21
    factory react refresh:6
    Webpack 3
ClearIcon.js:39
    ClearIcon ClearIcon.js:39
    React 11
    performSyncWorkOnRoot self-hosted:1230
    flushSyncCallbackQueueImpl React
    unstable_runWithPriority scheduler.development.js:468
    React 6
    bind_applyFunctionN self-hosted:1381
    dispatchDiscreteEvent self-hosted:1344
    React 4
    forEach self-hosted:4358
    React 7
    tsx index.tsx:21
    factory react refresh:6
    Webpack 3

This causes the whole app to crash.

The clear button itself works fine, though.

Handler for empty search

Hello,

I'm loving the component, but am facing a problem. When I clear the search input, ergo have an empty string, the search callback doesn't trigger, so I can't seem to clear the search.

Is there perhaps any callback when the search clears that I'm missing?

Thanks

Custom formatResult, is it possible?

Hi dev, I'm still trying to figure out how to make a custom formatResult with your library. I've attached the example below. Please let me know if it's possible to do

Thanks!

This is the only thing that I can do right now (pardon me for the bad quality)

placeholderColor cannot be changed

I saw in the docs that the default value for placeholderColor is set to 'grey'. I wanted to change the color of the placeholder so I added a prop to the component. I added this code in styling={{placeholderColor: "#ffffff"}}
and apparently, it is still showing a grey color for the placeholder.

API call after onSearch

Hi there,

Thank you for this amazing component!

In my handleOnSearch function I make an API request to get results based on the user input. However, the results that are shown are from the previous API call so I am wondering if there is a way to first make the API call and then show the results only after I updated the data.

Something like beforeSearch would be amazing 🥇

Thanks

axios - autocomplete

I am wondering how do I make the list be able to be from a axios request?

I found out the hard way that you can't do this

 function checkAnswer(event, e) {
    
            if(currentTimeoutId){
                clearTimeout(currentTimeoutId);
             }
         
             currentTimeoutId = setTimeout(function(){
                 currentTimeoutId = null;
                    axios.get('https://nominatim.openstreetmap.org/search.php?city='+e+'&countrycodes=AU&featuretype=county&polygon_geojson=1&format=json')
                    .then(function (response) {
                    // handle success
                    //alert(JSON.stringify(response.data))
                    console.log(response);
                    document.getElementById("results").innerHTML = "";
                    for (let i = 0; i < response.data.length; i++) { 
                      //  alert(response.data[i].osm_id)
                        document.getElementById("results").innerHTML +="<button onClick={addToResult("+response.data[i].osm_id+")}>ID:"+response.data[i].osm_id+" - "+response.data[i].display_name+"</button>\n\n"
                    }
        
                    })
                    .catch(function (error) {
                    // handle error
                    console.log(error);
                    })
                    .then(function () {
                    // always executed
                    //alert(response)
                    });
                },1000);
        
        }

ENTER key gives errror

Without typing anything just focusing on component's input and hitting ENTER key gives me an error:

TypeError: results[highlightedItem] is undefined

Component should not assume results is non-emty array.

How to test using testing library

I cant select the result using testing library :|

The default styles add a CSS rule to change the page font to Arial

When this library is added to a project, its css rules affect elements that are not children of the autocomplete component.

Currently, it adds a rule with a * selector with font rules which will change the font to arial in most scenarios. Usually font rules are defined in the root element (using an html or body selector) and inherited to its children.
If you want to use a certain font-family on your component, it should be defined at the component level not globally.

To be more precise, on src/config/config.js should have:

const GlobalStyle = createGlobalStyle`
  .your-component-class {
    box-sizing: border-box;
    font-family: ${(props) => props.theme.fontFamily};
    font-size: ${(props) => props.theme.fontSize};
  }
`

or define these rules some other place other than a global style, so it does not affect other components

Filtering isn't working correctly when you type the letter 'A'

First of all, thanks so much for react-search-autocomplete! It works great except when I type the letter 'A'. I have 8 products in my database that start with 'A'. I have maxResults set to 5. Yet I'm only getting 3 products that start with 'A'. I'm getting one that starts with 'J' and one that starts with 'S'. A small bug somewhere. Anyways, no biggie...just wanted to let you know.

Default value

Hi! How can I set a default value for the field? I could not find a way to do this, thanks!

If change keys props dont work

const fuseOptions = {

    useExtendedSearch: true,
    keys: [ 
        'title'
    ]
  }

I try to do that and dont work for me... plis help!``

        `<div style={{ minWidth: 400 }}>
                            <ReactSearchAutocomplete
                                fuseOptions={ fuseOptions }
                                items={data}
                                onSearch={handleOnSearch}
                                onSelect={handleOnSelect}
                                onFocus={handleOnFocus}
                                autoFocus
                                styling={{
                                    fontSize: "none",
                                    fontFamily: "Roboto, sans-serif",
                                  }}
                            />
                        </div>`

It seems to completely ignore ignoreLocation=true

The results it returns are only exact matches from the start of the strings.

search.ts

export const search_options = {
	ignoreLocation: true, // Pattern can be anywhere in string
	fuseOptions: {
		ignoreLocation: true, // Pattern can be anywhere in string
		threshold: 0, // How much the pattern much match and how much its location can deviate from location. 0=exact match
	},
};

some_component.tsx

<ReactSearchAutocomplete
	items={x}
	{...search_options}
/>

Encountered two children with the same key, `rsa-result-undefined`

Hi guys !
Thank you for the good work
Would you please add a key in the ui in Results competent thank you !

How can set default value in autocomplete ?

How can set default value in autocomplete ?

on collection data
data = [
{id: 0, name: 'alam'},
{id: 1, name: 'edit'},
{id: 3 name: 'asa'}
]

i want set default, with id = 0 or name alam ? its posible or not without selected first.

Default value problem

How can I add default value?

Show list on click at input

In the Documentation, we have a variable items with the values that will be presented when typing.
Since we have these values, it would be interesting to show these preloaded values when clicking on the input. Is it possible to do that?

how to save values in usestate which are not present in the list.

Add mic button

Hi, thnx for the beautiful library.

Kindly add a mic button and expected behaviour like as Google or expose a method to add a custom component.

Using <form> onSubmit and trying to clear input leaves search box open

I wanted to use the form and use Enter to save information as well as clicking, then clear the input for the user to enter more information. I referenced #23 and #38 to do this. However, the dropdown search box remains open. Is there a workaround to trigger the OnBlur event or empty the Results array so the box will clear when you set the input using setState?

See below for example:
https://codesandbox.io/s/nifty-morning-1zpn2e?file=/src/App.js

Component styling affects other components

Trying to add this to my site but the default styling it comes with is overriding and negatively affecting my existing styling. I'm using material-ui for other elements and styles.

Setting value of searchInput or clear input field without clear icon

How can I manually set the value of the searchInput field with inputSearchString? I have a placeholder value and onSelect event handler but want to clear input field when my onChange handler for my dropdown component is fired. It is not letting me do that with inputSearchString. I essentially want to be able to clear the input field without pressing the clear icon

Search results dropdown is transparent

Is there a way where we can set the background color, height, width for the Search results container? In my code, the background of the dropdown container is transparent. Hence, I could see the below fields overlapping with the dropdown. I was able to set the styling for each items using formatResult prop but could not handle the container. Also, wondering whether the zIndex might have something to with the overlapping.

AutoComplete list is not working if type is not {id,name}

Try to change the Type to:

type Item = {
        value: string;
        label: string;
    }

<ReactSearchAutocomplete<Item>/>

Put items with new format

 const items = [
        {
            value: "0",
            label: 'Cobol'
        }
    ]

The autoComplete is not working

Clearing Text on firing onSelect Event

1. I want to clear my input text automatically when I select a value from the dropdown.
2. Is there any way to give reference to this component or can we get the data by giving it Id and then get it by document.getElementbyId event?
   Kindly help I am stuck in it.

How to show Message if related data not found

How to show a error message like "No Data Found" ,when we didn't get the any value