英文:
AutoComplete: In material-ui (@mui) How to render all the properties in the json in options list and highlight the matching text in the option?
问题
在我的需求中，我需要在选项列表中显示名称和电子邮件地址，但现在我只能渲染一个参数，现在要渲染所有选项。
我的代码:
<Autocomplete
freeSolo
disabled={false}
fullWidth={false}
label={'label'}
multiple={true}
componentsProps={{
paper: {
sx: {
border: '1px solid lightgray',
marginLeft: 10.5,
width: 484,
}
}
}}
options={[
{ email: 'apple@gmail.com', label: 'apple', value: 'apple' },
{ email: 'pear@gmail.com', label: 'pear', value: 'pear' },
{ email: 'orange@gmail.com', label: 'orange', value: 'orange' },
{ email: 'grape@gmail.com', label: 'grape', value: 'grape' },
{ email: 'banana@gmail.com', label: 'banana', value: 'banana' }
]}
renderOption={React.useCallback((props, option, { inputValue }) => {
return (
<Box component='li' {...props}>
{option.label} - {option.email}
</Box>
)
})}
/>
英文:
In my requirement I need to show name and email address in options list but now i can able to render only one parameter, now to render all options.
my code:
<Autocomplete
freeSolo
disabled={false}
fullWidth={false}
label={'label'}
multiple={true}
componentsProps={{
paper: {
sx: {
border: '1px solid lightgray',
marginLeft: 10.5,
width: 484,
}
}
}}
options={[
{ email: 'apple@gmail.com', label: 'apple', value: 'apple' },
{ email: 'pear@gmail.com', label: 'pear', value: 'pear' },
{ email: 'orange@gmail.com', label: 'orange', value: 'orange' },
{ email: 'grape@gmail.com', label: 'grape', value: 'grape' },
{ email: 'banana@gmail.com', label: 'banana', value: 'banana' }
]}
renderOption={React.useCallback((props, option, { inputValue }) => {
return (
<Box component='li' {...props}>
{option.label}
</Box>
)
})}
/>
答案1
得分: 0
我已经使用dangerouslySetInnerHTML来自定义高亮选项并渲染电子邮件和标签，我以以下方式设置了宽度。
<Autocomplete
options={[
{ email: 'apple@gmail.com', label: 'apple', value: 'apple' },
{ email: 'pear@gmail.com', label: 'pear', value: 'pear' },
{ email: 'orange@gmail.com', label: 'orange', value: 'orange' },
{ email: 'grape@gmail.com', label: 'grape', value: 'grape' },
{ email: 'banana@gmail.com', label: 'banana', value: 'banana' }
]}
renderOption={React.useCallback((props, option, { inputValue }) => {
function boldString(str, substr) {
const strRegExp = new RegExp(substr, 'g')
return str.replace(strRegExp, '<b style=color:#1e99fa !important;>' + substr + '</b>')
}
return (
<Box component='li' {...props}>
<div style={{width: '50%'}} dangerouslySetInnerHTML={{ __html: boldString(option.label, inputValue) }}/>{option.email}
</Box>
)
})}
/>
output:
英文:
I have used dangerouslySetInnerHTML used to cutomized the highlight option and to render email and label I have setted the width in the following way.
<Autocomplete
options={[
{ email: 'apple@gmail.com', label: 'apple', value: 'apple' },
{ email: 'pear@gmail.com', label: 'pear', value: 'pear' },
{ email: 'orange@gmail.com', label: 'orange', value: 'orange' },
{ email: 'grape@gmail.com', label: 'grape', value: 'grape' },
{ email: 'banana@gmail.com', label: 'banana', value: 'banana' }
]}
renderOption={React.useCallback((props, option, { inputValue }) => {
function boldString(str, substr) {
const strRegExp = new RegExp(substr, 'g')
return str.replace(strRegExp, '<b style=color:#1e99fa !important;>' + substr + '</b>')
}
return (
<Box component='li' {...props}>
<div style={{width: '50%'}} dangerouslySetInnerHTML={{ __html: boldString(option.label, inputValue) }}/>{option.email}
</Box>
)
})}
/>
output:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论