Typeahead Enhancement: messaging for when there are no matches

[joshuacc]

It would be nice if there was a way to specify a message to display when there are no matches. For example: "There are no cities matching 'Metropolis'. Please check for spelling errors."

[bekos]

@joshuacc This sounds like a good addition.

[joshuacc]

@bekos I need this for a project at work, so I'll try to put together a pull request.

[bekos]

👍

[opetriienko]

Need this functionality as well. Is there any workaround for it?

[JobaDiniz]

@wrestlero when there is no result, I return an array with one item with a custom property "isNoResult" set to true. Then in the custom template I check that property to show the correct html.

Controller:

var getNoResult = function (searchTerm) {
        return [{
            isLast: false,
            isNoResult: true,
            isGrouped: false,
            Title: $translate.instant('NoVideoResultsFound') + ' "' + searchTerm + '"'
        }];
    };

//after calling server for results:
.then(function (data) {
            if (data === null)
                return getNoResult(searchTerm);

Custom template:

<!-- Normal item -->
<a class="search-dropdown-item clearfix" ng-if="!match.model.isLast && !match.model.isGrouped && !match.model.isNoResult" ng-href="{{match.model.url}}">
    <span class="search-dropdown-item-image pull-left">
        <img ng-src="{{match.model.Image}}" />
    </span>
    <div>
        <p class="title">{{match.model.Title}}</p>
        <p class="description">{{match.model.ShortDescription | characters:100}}</p>
        <age-rating age="match.model.Age" template-url="components/age/search-tv-rating.html"></age-rating>
    </div>
</a>

<!-- Grouped item -->
<div class="grouped-search" ng-if="match.model.isGrouped">
    <strong>{{match.model.Title}}</strong>
    <ul class="list-unstyled">
        <li ng-repeat="item in match.model.items">
            <a ng-href="{{item.url}}">{{item.Title}}</a>
        </li>
    </ul>
</div>

<!-- Last item -->
<div class="search-last-item" ng-if="match.model.isLast">{{match.model.Title}}</div>

<!-- No result item -->
<div class="search-no-results" ng-if="match.model.isNoResult">{{match.model.Title}}</div>

You can see that my typeahead has several others functionalities using this trick. (isGrouped, isLast).

[lynchblue]

+1: It would be really useful to have the possibility of displaying a message when there are not results to the search.

[arjunasuresh3]

+1

[vicch]

+1

[jodytate]

+1

[rasmi]

+1

[jczerwinski]

See #2792.

[jczerwinski]

The functionality will look like this:

<input typeahead-no-results="noResults">
<span ng-if="noResults">No Results found</span>