I am in the process of developing a textbox with suggestion text utilizing AngularJS. I have integrated a textbox on my webpage and what I aim to achieve is that whenever a user begins typing something, suggestions should appear which the user can click to automatically populate the textbox with the selected option. The suggestions are fetched from a database. I have successfully implemented this functionality, however, I am encountering an issue - after a user selects a value from the suggestion list and it populates the textbox, the list of suggestions still remains visible. Is there a way to hide the list without clearing the textbox value?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="TextApp">
<head>
<title></title>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-mocks.js"></script>
<script type="text/javascript" src="BaseCtrl.js"></script>
</head>
<body ng-controller="BaseController">
<div class="input-group" style="width: 50%;">
<input type="text" class="form-control" id="FirstName" ng-model="fnamequery">
<p id="pfname" ng-repeat="fname in fnames | filter:fnamequery" ng-hide="fnamequery==''"><a ng-href="" ng-click="GetSuggestion(fname)">{{fname}}</a></p>
</div>
</body>
</html>
and my controller is here:
angular.module('TextApp', []).controller('BaseController', function($scope, $http) {
$scope.fnames = [];
$scope.fnamequery = '';
$http.get('http://localhost:49358/api/myClasses/GetAllNames/').
then(function (response) {
$scope.fnames = response.data;
}, function errorCallback(error) {
//print error to console.
console.log(error);
});
$scope.GetSuggestion = function (strname) {
$scope.fnamequery = strname;
}
});