react-z / react-search Goto Github PK
View Code? Open in Web Editor NEWreact-search is a simple search autocomplete component using react.js.
react-search is a simple search autocomplete component using react.js.
I have a huge list of items (over 10k) that is part of the search list. When you try to click the search, it hangs . Is there way to not show items unless a query is typed out? Or maybe a way to lazily load the items as its scrolled down.
It would be great if there is a direction that i can check.
Thanks.
Do you have any advice on how to use this component in conjunction with redux-form? Redux-form appears to require each custom input field to have a prop of input.value. I haven't yet worked out a way of generating that prop from the selected values. All advice/suggestions would be much appreciated. Thanks.
Hi,
I would like to use the items found in the search bar and send them as props to a different component. Is there anyway I can get access to the these found items.
Also, I would like to prevent displaying these items. is that possible?
Hello
I have long unique ID's for my items as strings, like "af0aa000-2778-11eb-9d0e-0f95b229692e"
This doesn't work with your component because of this code. (parseInt)
handleSelect(e) {
let element = e.currentTarget.children[0]
let item = {
id: parseInt(element.dataset.id),
value: element.innerHTML.replace(/&/g, '&')
}
this.selectMenuItem(item)
}
Any possibility to change this to without parseInt?
Thx
I'm a newbie at React so bare with me, but I got this working however I can only select items half of the time or less..
And then added this js code to my App:
import Search from 'react-search'
import React, { Component } from 'react'
class App extends Component {
HiItems(items) {
this.setState({ repos: items })
}
constructor (props) {
super(props)
this.state = {
repos: []
}
}
getItemsAsync(searchValue, cb) {
let url = `https://jsonplaceholder.typicode.com/todos`
fetch(url).then( (response) => {
return response.json();
}).then((results) => {
if (typeof results !== "undefined"){
let items = results.map( (res, i) => { return { id: i, value: res.title } })
cb(searchValue)
this.setState({ repos: items })
}
});
}
render () {
return (
<div>
<Search items={this.state.repos} />
<Search items={this.state.repos}
multiple={true}
getItemsAsync={this.getItemsAsync.bind(this)}
onItemsChanged={this.HiItems.bind(this)} />
</div>
)
}
}
export default App;
but I can only select items half of the time, here is a video of me trying to select: https://sendvid.com/emr6tqhq
I copied the css from the example folder in node_modules/react-search/example/public/react-search.css
Tested using Chrome Version 54.0.2840.98 (64-bit)
Expected behaviour:
With the menu focussed, when the component loses focus, the menu should disappear. Effectively, the autocomplete__menu--hidden
should be re-applied to the menu when the component loses focus.
Actual behaviour:
When the menu is focussed and displayed, it won't hide again regardless of losing focus or interacting elsewhere within the DOM.
Steps to reproduce:
Pretty self explanatory really, the official demo exhibits the same behaviour.
More info:
I'm using the latest version 2.0.4
via NPM, within a React 15.4.0
app. Below is the bulk of the React component I've wrapped around react-search
.
search(text, cb) {
SearchActions.searchByString(text, this.state.account.authToken);
cb(text);
}
select(selection) {
var result = this.state.results.find(function (result) {
return result.id == selection[0].id;
});
if (result) {
console.log(result);
browserHistory.push(result.NodeUrl);
}
}
render() {
return (
<div>
<Search items={this.state.results}
placeholder='Search...'
multiple={false}
maxSelected={1}
getItemsAsync={this.search.bind(this)}
onItemsChanged={this.select.bind(this)} />
</div>
)
}
Hi!
This React components seems rather interesting!
Does it support gathering the items asynchronously from the server when the user types something?
Best regards,
I'm having issues using the example. Selecting an item in the drop down only works when the mouse is used, not when the trackpad is used. I'm on Mac. Is anyone else facing the issue?
I would like to have the capability to pass a default value.
e.g. select a record from a table in a database; Click on the record, the default value in the search box will be updated from a prop or state with the option to change it using the drop down.
with and without using NotFoundPlaceholder
Looking through you're code, I don't see any reason why someone wouldn't be able to use your module with React 0.14.
Could you please update your peer dependency range to allow for it?
I have an array of 3 different values, it is possible to search across the three of them?
How can I hide the drop down arrow when item is selected ?
Most search bars behave such that up and down arrows move through the list and the enter key triggers the search function (I think in this case it would be onItemsChanged).
Hi,
I'm using the react-search component and I have a question please.
How can I change or delete this message when I want to search a name : "Please search for some items..." that red message.
Thanks a lot.
Hi, Sorry about opening another issue but npm install is not working on the latest version for this. this is my debug log:
Ammars-MBP:recoveryBall AmmarKarim$ npm install react-search --save
[email protected] postinstall /Users/AmmarKarim/Desktop/backUps/recoveryBall/node_modules/react-search
npm run build[email protected] build /Users/AmmarKarim/Desktop/backUps/recoveryBall/node_modules/react-search
babel src --out-dir lib
The CLI has been moved into the package babel-cli
. See http://babeljs.io/docs/usage/cli/
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/Users/AmmarKarim/Desktop/backUps/recoveryBall/node_modules/.bin/npm" "run" "build"
npm ERR! node v5.2.0
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: babel src --out-dir lib
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'babel src --out-dir lib'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-search package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel src --out-dir lib
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-search
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-search
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/AmmarKarim/Desktop/backUps/recoveryBall/node_modules/react-search/npm-debug.log
npm WARN EPACKAGEJSON [email protected] No description
npm WARN EPACKAGEJSON [email protected] No repository field.
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "react-search" "--save"
npm ERR! node v5.2.0
npm ERR! npm v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: npm run build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'npm run build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-search package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build
npm ERR! You can get their info via:
npm ERR! npm owner ls react-search
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/AmmarKarim/Desktop/backUps/recoveryBall/npm-debug.log
Everything I put inside style={{ ... }} don't work
Type something in the input box. Click away and click back in, and the input is cleared. Is this something to do with my implementation or is this the default behaviour? If the latter it should be removed and introduced as an optional setting imo.
I am trying the async version and and getting the following error:
Uncaught TypeError: Cannot read property 'bind' of undefined
at ./node_modules/core-js-pure/es/instance/bind.js.module.exports (bind.js:6)
Any suggestions?
`class TestComponent extends Component {
constructor(props) {
super(props);
this.state = { repos: [] };
}
getItemsAsync(searchValue, cb) {
let url = https://api.github.com/search/repositories?q=${searchValue}&language=javascript
;
fetch(url)
.then(response => {
return response.json();
})
.then(results => {
if (results.items !== undefined) {
let items = results.items.map((res, i) => {
return { id: i, value: res.full_name };
});
this.setState({ repos: items });
cb(searchValue);
}
});
}
render() {
return (
export default TestComponent;`
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.