Поиск с подсветкой
Tue Mar 02 2021 16:17:03 GMT+0000 (Coordinated Universal Time)
Saved by @happy_cutman #react.js
// Данные документов const documents = [ { id: 'F0100111', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ ПРО МАЙНОВИЙ СТАН І ДОХОДИ' }, { id: 'F0100703', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ з податку на прибуток підприємств' }, { id: 'F0102003', name: 'ЗАЯВА про застосування спрощеної системи оподаткування' }, { id: 'F0102103', name: 'РОЗРАХУНОК доходу за попередній календарний рік, що передує року переходу на спрощену систему оподаткування' }, { id: 'F0103306', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ ПЛАТНИКА ЄДИНОГО ПОДАТКУ ФІЗИЧНОЇ ОСОБИ - ПІДПРИЄМЦЯ' }, { id: 'F0111611', name: "РОЗРАХУНОК суми податку, на яку зменшуються податкові зобов'язання з податку на доходи фізичних осіб,у зв'язку з використанням права на податкову знижку" }, { id: 'F0121211', name: "РОЗРАХУНОК податкових зобов'язань з податку на доходи фізичних осіб та військового збору" }, { id: 'F0121411', name: "РОЗРАХУНОК податкових зобов'язань з податку на доходи фізичних осіб та військового збору з доходів отриманих самозайнятою особою" }, { id: 'F0121611', name: "РОЗРАХУНОК суми податку, на яку зменшуються податкові зобов'язання з податку на доходи фізичних осіб, у зв'язку з використанням права на податкову знижку" }, ]; // Создаёт выделение текста const MarkUp = (props) => (<span dangerouslySetInnerHTML={{__html:props.HTML}}></span>) // Рендерит список документов const DocsList = () => { const [searchDocName, setSearchDocName] = React.useState(''); // получает пользовательский ввод const handleChange = event => { setSearchDocName(event.target.value); }; // отменяет перезагрузку страницы при подтверждении формы const handleSubmit = event => { event.preventDefault() }; // выполняет поиск и подсвечивает совпадающие символы const searchResults = !searchDocName ? documents : documents.filter(doc => doc.name.trim().toLowerCase().includes(searchDocName.trim().toLowerCase()) ) .map(doc => { // находит подстроку в поисковом запросе и выделяет её let markedDocName = doc.name.replace( new RegExp(searchDocName, 'gi'), match => `<mark style='background: #2769AA; color: white;'>${match}</mark>` ); return { ...doc, id: doc.id, name: markedDocName, } }); return ( <RadioGroup name='value' value={active ? active : ''} onChange={handleSelection}> {searchResults.map(doc => ( <FormControlLabel className={classes.item} style={{margin: 0}} label={ <Box className={classes.label}> <Box className={classes.documentId}> <span>{doc.id}</span> </Box> // подсветка результата поиска <span className={classes.documentName}> <MarkUp HTML={doc.name}/> </span> </Box> } key={doc.id} value={doc.id} control={<Radio style={{marginTop: -2}} color='primary'/>}/> ))} </RadioGroup> </Paper> ); }; export default DocsList;
Comments