In my Angular2 application, I am working on creating a search functionality similar to Google's search where the results are displayed in a box. While I have successfully implemented this feature and it is functioning properly, one issue remains. When using the "key down" or "key up" keys after performing a search, the search results in the result box do not highlight like they do in Google.
Here is my current code:
<input type="search" class="form-control">
// resultbox
<div>
<ul>
<li *ngFor="#item of items">{{ item.text }}</li>
</ul>
</div>
Please note that "items" represents the list of search results, which is displaying correctly. Now, I am looking for a way to dynamically highlight the specific <li> element that corresponds to the user's selection when navigating through the search results using the keyboard arrow keys.
My initial idea involves using an index counter to mark the selected <li> element with a unique class (e.g., "searchIndex") to change its color. However, I am unsure about how to implement this. Do you have a solution for achieving this highlighting effect? Alternatively, if you have a better suggestion for handling this scenario, I would appreciate your input.
I am hopeful that someone can provide guidance on this matter.