Learnomy
Get Learnomy Pro

Course Search Autocomplete

Free & Pro

As a student types in the course catalog search box, Learnomy shows a live dropdown of matching course names so they can jump straight to a course instead of waiting for a full page of results.

What you can do

  • Find a course by typing part of its title and picking it from a dropdown, without pressing Enter or loading a results page.
  • Get results after only two characters, updated as you keep typing.
  • Click any suggestion to go directly to that course's detail page.
  • Still run a full catalog search: pressing Enter submits the search form and the server re-renders the filtered grid, using the same query the suggestions came from, so the dropdown and the results page always agree.
  • See a clear "Searching..." state while matches load and a "No matching courses" message when nothing matches.

Course search autocomplete dropdown

How to use it

  1. Go to the course catalog at /courses/. The search box appears in the left filter sidebar (labelled "Search") and, in the top filter bar variant, above the course grid.
  2. Start typing a course name. Once you have typed at least two characters, a dropdown opens below the box.
  3. Wait a moment. Typing is debounced, so Learnomy waits briefly after your last keystroke and then fetches up to six matching courses. While it loads, the dropdown shows "Searching...".
  4. Read the suggestions. Each row is a matching course title. If nothing matches, the dropdown shows "No matching courses".
  5. Click a suggestion to open that course's detail page directly.
  6. Or press Enter to submit the full search. The catalog reloads showing every matching course in the grid, not just the first six.
  7. Click away from the box to close the dropdown. Returning focus to the box (with two or more characters still typed) reopens the last set of suggestions.

Settings & options

This feature works out of the box on the catalog and has no dedicated admin settings screen. The values it uses are:

  • Minimum characters - the dropdown starts fetching at two characters. Below two characters it stays closed.
  • Suggestion count - up to six courses are shown in the dropdown. The suggestion request is GET /learnomy/v1/courses with the search and limit (6) parameters.
  • Search field - the catalog search input uses the query parameter s, has autocomplete="off", and reuses the same course search as the full results page. Matching uses the course FULLTEXT search with a prefix wildcard, so "mind" finds "Mindful".
  • Dropdown messages - the "Searching..." and "No matching courses" labels come from window.lrnCatalog.i18n (searching and noResults), so they are translatable.
  • Suggestion links - each suggestion's URL is built from window.lrnCatalog.courseUrlTemplate, which resolves to the course route for the matched slug.

For developers

  • REST endpoint: suggestions are fetched from GET /learnomy/v1/courses?search=<query>&limit=6 (namespace learnomy/v1), the same endpoint the catalog grid uses.
  • Interactivity store: the behaviour lives in the learnomy/catalog store (assets/js/catalog-view.js). Relevant actions are search (debounced input handler), fetchSuggestions, openSuggestions, and hideSuggestions; state keys include suggestions, suggestOpen, suggestLoading, and the suggestVisible / suggestEmpty / suggestStatusLabel getters.
  • Template: the dropdown markup is templates/catalog/partials/search-suggest.php (a role="listbox" with role="option" items), included by both templates/catalog/sidebar.php and templates/catalog/grid.php. It is overridable from a theme at theme/learnomy/catalog/partials/search-suggest.php.
  • Search backend: matching runs through the course FULLTEXT search over lrn_courses (title plus the description_plain projection).
  • Catalog slug: the /courses/ base is filterable via learnomy_catalog_slug; suggestion links are built through \Learnomy\route_url( 'course', [ 'slug' => ... ] ).