The suggestion text in an AngularJS textbox fails to clear after a selection has been made

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;
    }
});

Answer №1

Why not give this a try?

<body ng-controller="BaseController">
<div class="input-group" style="width: 50%;">
    <input type="text" class="form-control" id="FirstName" ng-model="fnamequery" ng-change="fnamePicked = false;">
    <p id="pfname" ng-repeat="fname in fnames | filter:fnamequery" ng-hide="fnamequery=='' || fnamePicked"><a ng-href="" ng-click="GetSuggestion(fname)">{{fname}}</a></p>

</div>

 angular.module('TextApp', []).controller('BaseController', function($scope, $http) {
$scope.fnames = [];
$scope.fnamequery = '';
$scope.fnamePicked = false;

 $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;
            $scope.fnamePicked = true;
    }
});

Just a thought: Have you considered using one of the many autocomplete options available for AngularJS?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for directing a search URL with an embedded query string?

Currently, I am developing an express application that has two different GET URLs. The first URL retrieves all resources from the database but is protected by authentication and requires admin access. The second URL fetches resources based on a search para ...

What are the steps to require v-switch in Vuetify?

I am working with three v-switch elements, each of them is tied to the switch1 property. Whenever I click on a v-switch, it either adds or removes a value from switch1. Is there a way to make a v-switch mandatory? In other words, it should not be possibl ...

Calling a C# Webmethod using jQuery AJAX is not working as expected

I'm currently facing an issue calling a web method that I created. The problem lies in the fact that the ajax call isn't reaching my web method, which is puzzling to me because I have another web method in the same file with the same return type ...

Leveraging Vue properties within CSS styling

I am looking to utilize Vue data/prop variables within the <style> tag located at the bottom of my component. For example, suppose I have a component structured like this: <template> <div class="cl"></div> </template> < ...

Error message in React Js indicating the absence of a specified file or directory: "Package.json cannot

When I try to run npm start, I encounter the following error - PS D:\React\operations_app_tut> npm start npm ERR! path D:\React\operations_app_tut\package.json npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall open npm ...

ways to utilize inline styling in react using javascript

When repurposing an array of React components, I am looking to modify the inline styles generated with them. How can I access and log the inline styles of a React component? UPDATE: see the code snippet below: const pieces = this.props.pieces.map((decl, ...

In the XHTML mode, MathOverflow's invaluable mathematical expertise shines brightly

I am interested in incorporating the unique “piece of valuable flair™” from MathOverflow onto my website. The issue I am facing is that I want my webpage to comply with XHTML5 standards, meaning it should be served with the MIME type application/xht ...

Activate the ajax function using a specific reference

I have been working on creating an ajax function that contains all the data inside the variable called $item within the following function: public function handleAjaxData(&$item,&$params,$limitstart) { $view = JRequest::getVar('view' ...

Creating visual representations of class, organization, flow, or state diagrams using Vega or Vega-lite

I'm struggling to find an example of a state, class, flow chart, or org chart diagram created with Vega. Are there any available online? Vega seems like the perfect tool for this type of visualization, although it may be a bit complex. Without a star ...

Deactivate a Button until Another One is Clicked in React

Is there a way to disable the submit button until a rating has been provided? My Current State this.state = { stars: [ { active: false }, { active: false }, { active: false }, { active: false }, { active: fal ...

The ng-show feature is not functioning within the specified scope

I am facing an issue with showing/hiding content using Angular. When I try to do it using $scope, it does not work. However, if I replace the show variable with ng-model, it works perfectly. <div id="editClient" class="accordeon panel-group" ...

Exploring the Worldwide Influence of TypeScript, React, and Material-UI

I am currently following an official tutorial on creating a global theme for my app. In my root component, I am setting up the global theme like this: const themeInstance = { backgroundColor: 'cadetblue' } render ( <ThemeProvider theme ...

What is the best way to ensure that the circle is perfectly centered inside the box?

Currently delving into the world of game programming, I've been struggling with this exercise. I can't seem to figure out why the circle won't stop in the center of the box within the update function. What am I missing? var canvas = documen ...

Utilizing BBC gelui within Joomla 3.0 for seamless integration

I am currently using Joomla! 3.0 with the Joomlashape Helix template and I am following a tutorial. You can check out the tutorial here. The tutorial mentions that I need to download RequireJS. Can anyone confirm if RequireJS is compatible with Joomla 3 ...

Instructions for returning a function from within another function and then displaying it upon return

My current state: constructor(props) { super(props); this.state = { temperatureConversion: '', Here is the function I'm using: handleChange = async (value) => { this.setState({ value }); await Axios.ge ...

Strange problem with Mongoose and MongoDB arises while operating MEAN application on Openshift platform

My journey with Openshift has been quite eventful. From making drastic changes to learning about version-ing and nvm (Node Version Manager), it has been a rollercoaster ride. Dealing with npm versions to ensure compatibility with the server used express ve ...

Gulp and Vinyl-fs not functioning properly when trying to save in the same folder as the source file due to issues with

After exploring a variety of solutions, I have yet to find success in modifying a file in place using Gulp.js with a globbing pattern. The specific issue I am facing can be found here. This is the code snippet I am currently working with: var fstrm = re ...

Deactivating the idle timer in React Native: A Step-by-Step Guide

Currently, I am working on an app that involves a timer using RN. However, I have noticed that after approximately 1 minute and 50 seconds, the device's screen starts to dim in preparation for sleep mode. ...

Is the jQuery form plugin not passing any data to Node.js?

Check out the HTML form below: <form id="importForm" enctype="multipart/form-data"> <p> <label for="ownerName">Owner Name<pow class="requiredForm ...

Tips for adding page numbers to a PDF created from HTML using wkhtmltopdf

Our response: We currently utilize wkhtmltopdf for generating PDFs from a specified html template. A brief overview: We incorporate Sulu CMF in constructing our backend, which is built on Symfony2. The KnpSnappy Bundle acts as a Symfony wrapper for wkht ...