In Susper, we have implemented a suggestion box for our input box. This was done using Yacy suggest API. This is how the box looks:
In this blog, let us see how to implement such a box using html, css, twitter-bootstrap and typescript. You can also check the code at the Susper repository.
The html code is simple and straightforward:
A few points to notice :
- *ngIf=”results” ensures that the box is displayed only when it has suggestions to display and not otherwise
- The [routerLink] and [queryParams] attributes together link every result to the search page, with the correct query.
This is the css code :
A few points to notice again:
- Box-shadow: This gives the drop up a shadow effect, which looks really nice, the first 3 parameters are for dimensions (X-offset, Y-offset, Blur). The rgba specifies color, with parameters as (red-component, green-component, blue-component, opacity).
- Text-decoration: This attribute is used to add/remove decoration like underline for links.
- Font-family: The font-family mentioned here is Arial, if Arial is unavailable sans-serif is used.
In the typescript file, there are two major tasks:
- Splice the results if greater than five. A neat suggestion-box should have a maximum of five results, hence we splice the results:
- Hide the suggestion-box if there are no suggestions from the API:
This tutorial, http://4dev.tech/2016/03/tutorial-creating-an-angular2-autocomplete/ is very useful in case you want to implement auto complete suggestion feature from scratch.
In addition, this stack overflow thread has some interesting insights too: https://stackoverflow.com/questions/35881815/implementing-autocomplete-for-angular2