-
Notifications
You must be signed in to change notification settings - Fork 189
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix #1260 Updated search-bar input to allow autocomplete #1387
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -31,11 +31,21 @@ const useStyles = makeStyles((theme) => ({ | |
}, | ||
input: { | ||
fontSize: '1.6rem', | ||
'&:hover': { | ||
border: '2px solid #E5E5E5', | ||
}, | ||
'&:focus': { | ||
border: '2px solid #333E64', | ||
}, | ||
'& > *': { | ||
fontSize: '1.6rem !important', | ||
color: theme.palette.text.default, | ||
}, | ||
height: '50px', | ||
height: '55px', | ||
backgroundColor: '#E5E5E5', | ||
paddingLeft: '10px', | ||
border: '1px solid #A0A0A0', | ||
borderRadius: '5px', | ||
}, | ||
header: { | ||
padding: 0, | ||
|
@@ -166,11 +176,7 @@ function CustomizedInputBase(props) { | |
variant="outlined" | ||
list="searchData" | ||
></input> | ||
<datalist id="searchData"> | ||
<option>Test 1</option> | ||
<option>Test 2</option> | ||
<option>Test 3</option> | ||
</datalist> | ||
<datalist id="searchData"></datalist> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. To do this properly, we're going to want to only apply the new <SearchInput filter={filter} /> And the function AuthorSearchInput() {
return (
<>
<input
//...rest of props here
list="searchData"
/>
<datalist id="searchData">...</datalist>
</>
);
}
function PostSearchInput() {
return <input ... />
}
function SeachInput({ filter }) {
return filter === 'author' ? <AuthorSearchInput /> : <PostSearchInput />;
} There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ok, I think I see where your going here. What is the purpose of PostSearchInput() in this case? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Where There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh wait never mind, it would just be the output for a non autocomplete input. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Exactly, and if you want, it could be what it is now vs being limited to what you had to do to get the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have the jsx page setup and I can now switch between the two different author and post inputs. I'm now trying to figure out how make both these inputs to activate the SearchPage portion of the site. Here's were I call my SearchInput.jsx providing the filter. <FormControl fullWidth={true}>
<SearchInput filter={filter} />
</FormControl> And then here's my AuthorSearchInput(): function AuthorSearchInput(props) {
const classes = useStyles();
const { searchText, onChangeHandler } = props;
const onTextChange = (event) => {
onChangeHandler(event.target.value);
};
return (
<>
<input
// ...rest of props here
type="text"
id="authorSearch"
className={classes.input}
placeholder="How to Get Started in Open Source"
variant="outlined"
list="searchData"
value={searchText}
onChange={(event) => onTextChange(event)}
inputProps={{ 'aria-label': 'search telescope' }}
/>
<datalist id="searchData">
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</datalist>
</>
);
} Within my SearchInput.jsx I can't seem to be able to use |
||
</FormControl> | ||
</Grid> | ||
</Grid> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a way to use our colour palette?.
See how it was done in other components, like here or here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep I'm switching over to using the palette now.