I'm making an application where a user can search through 10.000+ birnames using a typeahead. Currently I have everything setup, without a preview, but I would like to add a little thumb next to the name to give a preview.
Seeing that I can't add 10.000 urls for each birdname into each document per bird in my database, I'd like to make a json request for the posibilies showing when typing.
I have set everything up accordingly:
A search input with a typeahead which collects all 10.000+ names from my database:
<input type="text" class="form-control search-input-nav" placeholder="Birdname"
autocomplete="off" ng-model="findBird" typeahead-no-results="noResults"
uib-typeahead="bird for bird in birds | filter:$viewValue | limitTo:8"
typeahead-select-on-blur="true"
typeahead-template-url="/partials/model/birdTypeahead.html"
ng-enter="findBirdlist(findBird, noResults)">
<div class="ErrorSearchBird" ng-if="noResults">
<div class="errorTriangle"></div>
<div class="errorText">Please pick a valid birdname</div>
</div>
And the template made to show the image preview and name accordingly:
<div ng-controller="navCtrl">
<a class="clickable">
<img ng-src="https://upload.wikimedia.org/wikipedia/commons/8/87/Little_tinamou.jpg"
width="16">
<span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
</a>
</div>
As you can see above, I would like to show the image of the specific bird, depending on the match.label right beside it.
Is there a way for me to check when new names are being shown and if so, make a json call and retrieve the image accordingly?
I've tried it using ng-keydown Though I don't know how to pass along the birdnames.
I hope this is a bit clear.. If it isn't, feel free to ask below and I'll try explaining it in another manner.
