I am facing an issue with displaying the result list when searching for users on key press using customTemplate.js. The list is not showing up after the first key press. Below is the code I am using:
<input type="text" placeholder="Search people here..." ng-change="getMatchedUser();" ng-model="selected" data-typeahead="user as user.name for user in searchMembers | filter:$viewValue" typeahead-on-select="onSelect($item, $model, $label)" typeahead-template-url="customTemplate.html" />
<script type="text/ng-template" id="customTemplate.html">
<a style="cursor: pointer;">
<div class="search-div">
<span style="float: left;"><img ng-src="<?php echo base_url().UPLOAD_PROFILE ?>{{match.model.imageUrl}}" width="30" class="img-circle"></span>
<div class="search-name">
<span>{{match.model.name}}</span><br/>
<span ng-if="match.model.skillName.length">
<i class="skill">{{match.model.skillName}}</i>
</span>
</div>
</div>
<div style="padding-bottom:42px;" ng-if="match.model.length == 5">
<a href="<?php echo base_url(); ?>#/searchResult" style="float: left; padding: 18px 1px 5px 8px; color: black;">
Show More Results
</a>
</div>
</a>
</script>
$scope.getMatchedUser = function(){
$scope.searchValue = $scope.selected;
$http({
method : "POST",
url : BASE_URL + 'getMatchedUser',
data : $.param({"typeValue": $scope.selected}),
headers : { 'Content-Type' : 'application/x-www-form-urlencoded'}
}).success(function(data){
if(data.status == "success"){
$scope.searchMembers = data.searchMembers;
}
});
};