Estoy trabajando en un menú desplegable y lo que quiero es que cuando el usuario escriba algo en el campo de entrada de ese menú desplegable, se ordenen los resultados del menú desplegable. Los valores del menú desplegable provienen de una matriz.
Por ejemplo, ListaCódigos = [N1, N2, N3, N10 ,B1, B2, B3,B10 ]
Cuando el usuario escribe solo N , estos resultados deberían aparecer en el menú desplegable. N1, N2, N3, N10
Cuando el usuario escribe N1 , solo deben aparecer estos resultados. N1, n10
handleChange = (event) => { let { filter } = this.state; filter = { ...filter, [event.target.id]: event.target.value, }; this.setState({ filter }); if( event.target.id === 'rtnRsnCd'){ this.setState({ [event.target.id]: event.target.value, showAllDropDownValues: false }) if (event.target.value) { this.getLovRsnCd(event.target.value); } else { this.getLovRsnCd.cancel(); } } console.log("target type", event.target.id); } getLovRsnCd = (rsnCd) => { const { showAllDropDownValues } = this.state; const { actions, userId, opcode, codeList } = this.props; if (showAllDropDownValues) { rsnCd = null; } let rsnList = []; const index = _.findIndex(codeList, (e)=>{ return _.contains(e,rsnCd); }); <ButtonDropdown direction="down" className="manifest-detail-button-width" isOpen={openReasonCode} toggle={() => this.setState( { openReasonCode: !openReasonCode, showAllDropDownValues: true }, this.getLovRsnCd ) } > <DropdownToggle className="swms-po-status-button-wrapper"> <Input value={rtnRsnCd || ""} id="rtnRsnCd" className="swms-manifest-invoice-rtn-input text-uppercase" onChange={this.handleChange} // onChange={(e) => this.setState({ [e.target.id]: e.target.value })} />Pensé en usar lodash pero no estoy seguro de cómo funciona.
¡Prueba esto!
const names = ["N1", "N2", "N3", "N10", "B1", "B2", "B3", "B10"]; const yourString = "n" return ( <div> {names .filter((name) => name.toLowerCase().includes(yourString) || name.toUpperCase().includes(yourString)) .map((filteredName) => ( <li>{filteredName}</li> ))} </div> );