Audit logs: support 'type to locate' in the student name drop-down

[damithc]

This drop-down can be quite long. Can we support 'type to locate' ability here?

[damithc]

An alternative is to pop-up a modal containing all students (possibly with more details such as team, email, section etc. -- somewhat similar to what we do in the 'Remind' feature) and advise the user to Ctrl+F to locate the name.

[t-cheepeng]

The modal option makes it seem as if the instructor can search for multiple students?

I think the type to locate would be a more friendly option. Would imagine that a instructor using the page should know the student name he/she wants to search for (if using that filtering option).

[damithc]

The modal option makes it seem as if the instructor can search for multiple students?

Depends on the content of the modal.

I think the type to locate would be a more friendly option. Would imagine that a instructor using the page should know the student name he/she wants to search for (if using that filtering option)

Sure, I'm fine with that too.

[t-cheepeng]

@damithc

The typeahead looks something like this

Only appears whn > 1 character is typed and maximum of 10 names will appear. Is the 10 name limit okay? Or leave it unbounded?

[damithc]

The typeahead looks something like this

I was expecting the dropdown to remain, and allow typing to narrow down the selection. Is that possible? In the end, this is meant to be a choice among options, not a free text entry.

[t-cheepeng]

The easiest way is to use the <datalist> tag. But the issue is that the tag is styled very differently in browsers(which is expected but some browsers style it weirdly) and is buggy in older browsers like safari. See the attached below. Also, bootstrap does not style this tag for us so we cannot fall back on it.

Left: Firefox, right is Chrome. The dropdown arrow is missing in the firefox one but present in chrome

We could also manually toggle the dropdown and typing though that will take a while to get up and running

[damithc]

Desirable properties, off the top of my head:

1. User has a way use the dropdown, without having to type anything
2. User cannot search for something that is not one of the available options
3. What user types need not be at the start of the name
4. Case should not matter
5. There is some indication that the user can type-to-locate