How can we add the image and description in Suggestions ?

[digimantraoffice]

Hi,

Your module really save my time, I wonder if there is any option why which I can add image and some description in suggestions .

Like This : http://imgur.com/k8AFI9A

Thanks

[JustGoscha]

You can adapt the template for your needs in autocomplete.js:

{
...
template: '\
        <div class="autocomplete {{ attrs.class }}" id="{{ attrs.id }}">\
          <input\
            type="text"\
            ng-model="searchParam"\
            placeholder="{{ attrs.placeholder }}"\
            class="{{ attrs.inputclass }}"\
            id="{{ attrs.inputid }}"/>\
          <ul ng-show="completing && suggestions.length>0">\
            <li\
              suggestion\
              ng-repeat="suggestion in suggestions | filter:searchFilter | orderBy:\'toString()\' track by $index"\
              index="{{ $index }}"\
              val="{{ suggestion }}"\
              ng-class="{ active: ($index === selectedIndex) }"\
              ng-click="select(suggestion)"\
              ng-bind-html="suggestion | highlight:searchParam"></li>\
          </ul>\
        </div>'
...
}

In the <li> you can make a sub-tag and style it like you want and access attributes of your suggestion e.g.

<img ng-src="suggestion.imageUrl"><div>{{suggestion.title}}</div>

If the template gets too long you can put it in a separate html file and then import it in autocomplete.js with.

{
...
templateUrl: 'myTemplate.html',
...
}

It will also look prettier as pure HTML code without the \ on each new line.

[digimantraoffice]

Hi @JustGoscha ,

Its works , Thanks for your time I have one small doubt

When a user click over any suggestion name must be filled in the input box and there must be some hidden field where I can store ID

For this I update

code as

ng-click="select(suggestion.name,suggestion.id)"

and in autocomplete.js

  $scope.select = function (suggestion,suggestionid) {
                if (suggestion) {
                    $scope.selectPageId = suggestionid;
                    console.log(suggestionid);
                    $scope.searchParam = suggestion;
                    $scope.searchFilter = suggestion;
                    if ($scope.onSelect)
                        $scope.onSelect(suggestion);
                }
                watching = false;
                $scope.completing = false;
                setTimeout(function () {
                    watching = true;
                }, 1000);
                $scope.setIndex(-1);
            };

and on the index.html page I add a new field

<input type="hidden" ng-modal="selectPageId" id="selectPageId" value=""/>

but its not passing the value to that field

So I update the code like this

  $scope.select = function (suggestion,suggestionid) {
                if (suggestion) {
                    $('#selectPageId').val( suggestionid );
                    console.log(suggestionid);
                    $scope.searchParam = suggestion;
                    $scope.searchFilter = suggestion;
                    if ($scope.onSelect)
                        $scope.onSelect(suggestion);
                }
                watching = false;
                $scope.completing = false;
                setTimeout(function () {
                    watching = true;
                }, 1000);
                $scope.setIndex(-1);
            };

Which works but i know its a wrong way