[Copilot]

The search autocomplete lacked keyboard-driven search submission and the search results view was still using deprecated AngularJS. This implements a modern search experience with Enter-key search submission and a Vue-based results page with infinite scroll.

Changes

Search Autocomplete Component

• Rewrote to handle Enter key → navigates to search page with query
• Added "Search for '{{query}}'" option (always first in dropdown)
• Arrow key navigation across search option and entity results
• Removed nested component dependency for direct control

Search Results Page (search-page.vue)

• Vue 2 component with dedicated search bar for new queries
• Infinite scroll: displays 10 results at a time from pre-fetched data (limit: 1000)
• Search-engine style cards: title, description, types, direct entity links
• Right sidebar: KG card for highest-scoring result
• IntersectionObserver for efficient scroll detection

Backend Templates

• search.json: SPARQL full-text search with score-based ordering
• search.html: Vue component wrapper

View System Registration (default_vocab.ttl)

• Updated whyis:search to use search.html (Vue-based) instead of search-view.html (AngularJS)
• Added whyis:searchData property pointing to search.json SPARQL template
• Defined whyis:searchView and whyis:searchData as subproperties of whyis:hasView

Usage

// Autocomplete now supports Enter key
<search-autocomplete></search-autocomplete>

// New dedicated search page
<search-page></search-page>

Users can now:

1. Type in search autocomplete, press Enter → redirects to /about?view=search&query=...
2. Click "Search for '{{term}}'" in autocomplete dropdown
3. Scroll infinitely through results
4. View top result details in sidebar KG card

Original prompt

The current search autocomplete component isn't working correctly. It needs to implement the following additional behavior (in addition to its existing autocomplete function):

When the user hits enter, the search string is sent to the search view to render as a web page.

The user can also select "search for '{{search value}}' and also be sent to the search page with that as the search string.

The search page needs to be migrated to Vue 3.

The search page needs a dedicated search bar that performs new searches.

Search results should be displayed in useful ways like a search engine.

The search results should offer infinite scroll like the instances views.

If there's a good match, the highest scoring entity should be displayed on a right sidebar using a kg card.

All matches (and the KG card) should link to the pages for the entities in question.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[jpmccu]

@copilot You also need to update the search views in default_vocab.ttl to make sure things render correctly. That's the primary way that we display web pages and data.

[Copilot]

@copilot You also need to update the search views in default_vocab.ttl to make sure things render correctly. That's the primary way that we display web pages and data.

Updated in commit 8206da9. Changed whyis:search to use the new search.html template (Vue-based) instead of search-view.html (AngularJS), and added whyis:searchData property pointing to the new search.json SPARQL template.

[github-actions]

✅ Vue.js tests passed! Coverage report available in artifacts.