Fix #1260 Updated search-bar input to allow autocomplete

[MSTEWARDSON]

Issue This PR Addresses

Issue #1260

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

Changed the search-bars input field to allow autocomplete from a given data set. Addition css was added to get the new input to match the previous style, all old functionality seems to be intact.

Currently it is not linked to a data set, but I am planning to open another issue to add the backend support needed after this.

To test the code you can add some options to the data list, when done they should appear below the search bar as you type.

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[c3ho]

Why was the previous one closed?

[MSTEWARDSON]

I had an issue with merge conflicts that I couldn't resolve. I asked humphd if it was ok to make a new PR in this case. Sorry for the confusion.

[humphd]

To do this properly, we're going to want to only apply the new datalist (and eventually fetch its data) if the user selects an Author filter. The easiest way to achieve this is to use the filter value in order to decide whether or not to render this. Another way to go would be to break this part of the search UI into its own components:

<SearchInput filter={filter} />

And the SearchInput.jsx could do something like this:

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 />;
}

[MSTEWARDSON]

Ok, I think I see where your going here. What is the purpose of PostSearchInput() in this case?

[humphd]

Where AuthorSearchInput includes a <datalist> and a list="..." attribute, PostSearchInput does not: it only returns the <input ...> where ... is all of the attributes I didn't bother typing.

[MSTEWARDSON]

Oh wait never mind, it would just be the output for a non autocomplete input.

[humphd]

Exactly, and if you want, it could be what it is now vs being limited to what you had to do to get the datalist to work (i.e., they can use different components/elements to render the input).

[MSTEWARDSON]

@humphd

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 onChange={(event) => onTextChange(event)}
This throws an error that it is undefined. I'm unsure on how to get this working.

[manekenpix]

Is there a way to use our colour palette?.

See how it was done in other components, like here or here.

[MSTEWARDSON]

Yep I'm switching over to using the palette now.

[MSTEWARDSON]

Can someone help my out here. I was trying to push my changes up to add to this PR so I could have someone look at my code. But when I made my push it merged and closed the branch? Im confused now.

[humphd]

@MSTEWARDSON I'm not clear what you've done here: MSTEWARDSON merged commit 9ddb846 into Seneca-CDOT:issue-1260/mstewardson 5 hours ago.

I think you need to start a new branch off of current master and add your changes, then create a new PR.

[MSTEWARDSON]

Yeah I just made sure my master was up to date and am currently making a new branch.