score:0
its not the complete solution, but you can adapt this example:
https://jsfiddle.net/julmot/hdylpy37/
it uses the markjs library:
here is the javascript code:
// create an instance of mark.js and pass an argument containing
// the dom object of the context (where to search for matches)
var markinstance = new mark(document.queryselector(".context"));
// cache dom elements
var keywordinput = document.queryselector("input[name='keyword']");
var optioninputs = document.queryselectorall("input[name='opt[]']");
function performmark() {
// read the keyword
var keyword = keywordinput.value;
// determine selected options
var options = {};
[].foreach.call(optioninputs, function(opt) {
options[opt.value] = opt.checked;
});
// remove previous marked elements and mark
// the new keyword inside the context
markinstance.unmark({
done: function(){
markinstance.mark(keyword, options);
}
});
};
// listen to input and option changes
keywordinput.addeventlistener("input", performmark);
for (var i = 0; i < optioninputs.length; i++) {
optioninputs[i].addeventlistener("change", performmark);
}
Source: stackoverflow.com
Related Query
- Highlight text as you type in textarea Reactjs
- A component is changing an uncontrolled input of type text to be controlled error in ReactJS
- Highlight text using ReactJS
- ReactJS Warning: TextField is changing an uncontrolled input of type text to be controlled
- ReactJS - Warning: A component is changing an uncontrolled input of type text to be controlled
- How can you get highlighted text (window.getSelection()) in ReactJS
- ReactJS error You may need an appropriate loader to handle this file type
- I can't type in input text using reactjs
- ReactJS - You may need an appropriate loader to handle this file type
- How to hide text in input field as you type each character?
- Can not type any text in textarea
- Reactjs Form Validations-for input type number the text field in constantly showing single value even after giving backspace from the keyboard
- Textarea issue in reactJS : A component is changing a controlled input of type undefined to be uncontrolled
- ReactJs with big forms, having a lag when type in text fields
- ReactJS - Warning: A component is changing an uncontrolled input of type text to be controlled - edit function
- How do I fix a component is changing from controlled input of the type text to be uncontrolled. Reactjs Error
- Can't type in React input text field
- ReactJS and Typescript : refers to a value, but is being used as a type here (TS2749)
- In Sublime Text 3, how do you enable Emmet for JSX files?
- How to get input text value on click in ReactJS
- Material UI Select Component- A component is changing a controlled input of type text to be uncontrolled
- How to output text in ReactJS without wrapping it in span
- IMAGE: You may need an appropriate loader to handle this file type
- How to display a image selected from input type = file in reactJS
- ReactJS component not rendering textarea with state variable
- ReactJS How do you switch between pages in React?
- Type 'null' is not assignable to type 'HTMLInputElement' ReactJs
- Set text input placeholder color in reactjs
- how to solve this error You may need an appropriate loader to handle this file type
- ReactJs prevent e and dot in an input type number
More Query from same tag
- ReactJS: Cannot read property 'value' of null when getting selected value
- How do I avoid using separate _PENDING _FULFILLED and _REJECTED actions with redux thunk?
- Container displayed incorrectly after install
- How to add input value as a tag to an object array and display it in react js
- react how to style : styled-dropdown-component
- is there a way i can make componentDidMount work in react native file
- ReactJS confusing 'JS code as text' and real JS code: Add javascript code as text in ReactJS div
- How to rewrite state correctly in filters React
- Passing a direction prop into styled-components keyframe component?
- How to make a Context API inside an Axios Call
- unable to Compress into gzip in webpack
- React Redux SSR how to suppress initial actions called from componentDidMount?
- Form is clearing blank inputs prev set data
- Binding a props function
- ReactJS - Dynamically return components using names in a JSON
- Automatically update array of objects value when typing
- React Native pass function to child component as prop
- How to do routing in react?
- Firebase 3.0 throws cross-origin error when bundled with webpack
- setState implementation in Reactjs
- Object cannot render as React Child (Error while using array.filer() method)
- React router useHistory
- How to add php on a nextjs project on a specific folder or route
- React - Adding a property to an object inside of array in component's state
- Can't use useRef as componentDidUpdate replacement
- onChange useState one character behind
- How can I extract my function into its own modules?
- How do I deal with d3.json to get my InitialState in React/redux
- Yup validation issue: Fields with their respective values present still says field is required
- In React what's the best way to render a Component differently the first time it appears on the page?