Typeahead search bar

[Bad-Science]

People have asked us for a live 'search-as-you-type' dropdown search bar for a long time. We should implement it!

We should use the ng-bootstrap typeahead component (https://ng-bootstrap.github.io/#/components/typeahead/examples) to implement this.

The typeahead should make requests to the search API (/courses?search={search}), and display the names of the results in the dropdown. If a course is selected from the dropdown, we should navigate to the page /courses?id={selected id}. Otherwise, we should make the search query as we normally do now.

Please make sure there are tests included with this feature, and post screenshots of the results for feedback 🙂

[milnej]

The basic typeahead search bar is implemented. As of now there are a few issues:

• When a search is selected from the typeahead bar it still uses the default search, it does not go only to that course.
• There is no cap on the amount of suggestion shown
• All amounts of characters show suggestions (including empty which shows all courses). We want to only show after around three characters and limit it to only 10 suggestions.

[Bad-Science]

Thanks for the update @milnej ! Keep up the great work!

[milnej]

This is how the typeahead will look:

[milnej]

I have fixed it so that only 10 courses display at max and options only display after 3 characters are typed. We still have the issue of displaying only the requested course.

Another issue I have run into is cross listed courses. There are two ways to go about this. Have them only display once (more difficult) or have the course ids show as well. For example, rather than just displaying "Introduction to Algorithms" it would display "CSCI 2300 Introduction to Algorithms". This would allow cross listed courses to display twice and be valid. The problem is that this data is not stored in the course model, only in the section model. I'm not sure if we are able to pull data from the section in the same way we can from the courses.

[Bad-Science]

@milnej That's great, thanks! The duplicate names is an interesting problem. Showing the subject and number could work, but it would also clutter the dropdown and I don't think it would look very nice. What if, in the case of duplicate names:

• Only showed the name once BUT
• If the user clicks that name, they are shown all the courses with that name

The way we make queries should already support this, since all queries support comma separated lists of values, e.g., you can do /courses?id=<id1>,<id2>. So all you would have to do is aggregate the names and the ids of the search results, and probably store them in a mapping of names to ids. i.e.,

{
  'Data Structures': [<id1>],
  'Cognitive Computing': [<id1>, <id2>]
}

There is also a simpler way to do this. You can actually query directly by name. So you could just get the first 10 unique course names, and if the user clicks one, navigate to /courses?name=<name>. In addition to the search param, you can also query exact matches by name.

[milnej]

The implementation is finished.

• Each cross listed course only displays once but brings you to a page with both of them when selected
• Both click and enter on the drop down bring you to just selected course
• normal search functionality still works
• search drop down does not start auto selected

Now I need to write test cases.

[milnej]

This feature has been satisfied on PR: https://github.com/YACS-RCOS/yacs-web/pull/62 The issue for test cases can be found here: https://github.com/YACS-RCOS/yacs-web/issues/64