Comments (15)
Thanks @arvinsingla!! Here is @bvaughn's helpful example updated for v2:
import React from 'react';
import Select from 'react-select';
import Highlighter from 'react-highlight-words';
const options = [];
function formatOptionLabel ({label}, {inputValue}) {
return (
<Highlighter
searchWords={[inputValue]}
textToHighlight={label}
/>
);
}
function render () {
return (
<Select
options={options}
formatOptionLabel={formatOptionLabel}
{...otherProps}
/>
);
}
from react-select.
Hi all!
This is possible using a custom optionRenderer
and a 3rd party library like react-highlight-words.
import React from 'react';
import Select from 'react-select';
import Highlighter from 'react-highlight-words';
const options = [];
let inputValue;
function optionRenderer (option) {
return (
<Highlighter
searchWords={[inputValue]}
textToHighlight={option.label}
/>
);
}
function render () {
return (
<Select
onInputChange={(value) => inputValue = inputValue}
options={options}
optionRenderer={optionRenderer}
{...otherProps}
/>
);
}
I don't think this functionality belongs in react-select
. It's useful to keep the base component as simple as possible in order to keep in maintainable and bug-free. Since it's easy to add this functionality using 3rd party libraries (like shown above) I'm going to close this issue for now.
Cheers! 😄
from react-select.
This should work without react-highlight-words
function formatOptionLabel ({label}, {inputValue}) {
const highlighted = option.label.replace(
new RegExp(labelMeta.inputValue, 'gi'),
highlighted => `<mark>${highlighted}</mark>`
);
return (
<span dangerouslySetInnerHTML={{ __html: highlighted }} />
);
};
from react-select.
@raviteja83 I used formatOptionLabel
in v2 to accomplish this.
from react-select.
I have been able to get a highlight effect on the options through a sort of kludge of onInputChange and optionRender. Essentially, whenever the input changes, I capture it and use it to construct an array of spans that wrap the matching text with a specific class I can style (react-select-match).
Highlighter = (function () {
function Highlighter () {
this.input = '';
};
Highlighter.prototype = {
wrap (t, c) {
return (
<span className={c}>{t}</span>
);
},
chop (v, i) {
var
regexp = new RegExp(i, 'i'),
mark = v.search(regexp),
len = i.length;
if (mark === -1) {
return [this.wrap(v)];
} else {
return [].concat(
this.wrap(v.substr(0, mark)),
this.wrap(v.substr(mark, len), 'react-select-match'),
this.chop(v.substr(mark + len), i)
);
}
},
onInputChange (inp) {
this.input = inp
.replace(/^ +/, '')
.replace(/ +$/, '')
;
},
optionRenderer (val) {
if (this.input && this.input.length) {
var looking = this.input,
resp =this.chop(val.label, this.input);
console.log(resp);
return resp;
}
else {
return val.label;
}
},
};
return Highlighter;
}());
...
var highlighter = new Highlighter();
<Select
onInputChange={highlighter.onInputChange.bind(highlighter)}
optionRenderer={highlighter.optionRenderer.bind(highlighter)}
/>
from react-select.
Maybe we should highlight the match with a different background color? bolding parts of the word would make the letter spacing jump around a bit, I think. Good idea though, if it's a <span class="matched-text">
(or similar) then themes can do whatever they like.
from react-select.
Any progress on this yet? I like the idea of a span tag around matched text.
from react-select.
@dlong500 it might be easier to add this functionality through other means, rather than adding all this rich text handling in the component it self.
As it stands, you could probably handle this in the async search options callback to update the list to have bolded [relevant] values, but that doesn't really work for the non-async case.
from react-select.
@dcousens I agree it would be possible to handle this outside the component for async operations, but even then it would be much more pleasant if the component could wrap a span tag around any matching text. I don't like the idea of having to mix CSS tags into a function that would otherwise only be returning raw data. Plus it means a lot of code duplication if you've got to implement that functionality all over the place.
from react-select.
I too, think that this would be a really nice addition to the core package, maybe just a toggleable option if nothing else? As this is quite "normal" behaviour for a typeahead I would say.
from react-select.
Sorry for late, but i have questions about it.
- Can i use both optionRenderer and optionComponent in one time?
- It is possible to pass onInputChange value to optionComponent?
from react-select.
Can i use both optionRenderer and optionComponent in one time?
Yes. OptionComponent
specifies the component class-type used to render the option-wrapper. (The default is Option
.) optionRenderer
renders the children/content inside of the option. Look here to see what I'm talking about.
It is possible to pass onInputChange value to optionComponent?
No. Input is handled separately, outside of the scope of a single option. It has nothing to do with the optionComponent
.
from react-select.
Oh, react-highlight-words still use babel v5 :(
from react-select.
@bvaughn How can this be used with v2? CustomOption does not get value of the option. can you suggest a possible way to do the same in v2?
from react-select.
No idea. Haven't used v2. Sorry!
from react-select.
Related Issues (20)
- MenuPortal placement is off for position='fixed' if a parent has transform: scale
- Cannot select options on iOS with VoiceOver since 5.8.0 HOT 1
- MS Edge 119: text cut in placeholder/selected option HOT 1
- Name property is not defined for option in the animation color dropdown.
- autoComplete overlaps the input field on v5 HOT 1
- <title> OMG HOT 1
- react-select v5.8.0: `Extra attributes from the server: aria-activedescendant` HOT 3
- Async multi select options are reset after selecting an option HOT 2
- Issue with input type="number" on Firefox/Safari HOT 2
- Menu is closing inside tests HOT 4
- Validation works incorrectly for React-select with Formik and yup on mobile device
- JAWS screen reader highlight/focus issue
- Bug: right clicking on a select input when the menu is open makes the input unresponsive
- Inconsistent Behavior With Magnification When Selecting Dropdowns
- Inconsistent Behavior With Magnification When Selecting Dropdowns
- Pressing on Tab key takes me to outside of the form instead of next input. HOT 9
- <withAsyncPaginate: the options menu closes on every option click>
- The issue where the keyboard's down button does not work immediately during Korean input
- Extra Space in Dropdown Menu of React Select Component on Initial Render
- not showing the inital value HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-select.