I'm working on a dropdown and what I want is when the user type something in the input field of that drop down, the results of the dropdown should be sorted. The values of the dropdown come from an array.
For example, codeList = [N1, N2, N3, N10 ,B1, B2, B3,B10 ]
When user type just N these results should come in dropdown. N1, N2, N3, N10
When user type N1 only these results should come. 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 })}
/>
I thought of using lodash but not sure how this works.
Try This!
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>
);