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:
[routerLink]=”resultsearch“ [queryParams]=”{query: result}” class=“suggestions”>{{result}}
</div>
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 :
text-decoration: none;
}.suggestions {
font-family: Arial, sans-serif;
font-size: 17px;
margin-left: 2.4%;
}.query-suggestions:hover {
background: #E3E3E3;
}.suggestion-box{
width: 635.2px;
max-width: 100%;
border: 1px solid rgba(150,150,150,0.3);
background-color: white;
margin-left: -25.7px;
position: absolute;
box–shadow: 0px 0.2px 0px;
}
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:
if ( this.results.length > 5) {
this.results = this.results.splice (0, 5);
- Hide the suggestion-box if there are no suggestions from the API:
…
this.query$.subscribe( query => {
if (query) {
this.autocompleteservice.getsearchresults(query).subscribe(res => {
if (res) {
this.results = res[1];
if (this.results.length === 0) {
this.hidecomponent.emit(1);
} else {
this.hidecomponent.emit(0);
}
If you want a more elaborate picture, you can view the entire html, css and typescript files of the auto-complete component.
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