AngularJS text suggestion textbox

Question

I am working on text suggestion textbox using angularjs.

Below is my page html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<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" ng-change="toggleSuggest()">
        <p ng-repeat="fname in fnames | filter:fnamequery">{{fname}}</p>

    </div>
</body>
</html>

and here is my controller file BaseCtrl.js:

angular.module('TextApp',[]).controller('BaseController', function($scope, $http) {
$scope.fnames =  ["Aida", "Aidan", "Alla", "Allen", "Beverly", "Bea", "Caleb", "Catherine"];
$scope.toggleSuggest = function () {
    console.log($scope.fnamequery);
    if ($scope.fnamequery == '') $('p').hide();
    else $('p').show();
}
});

In the future I am planning to pull up the names from the database via Web API call, but for now I am just trying to get it to work with hard-coded values.

Now I get all the values shown on the page. The values do get filtered out as I type something in but initially everything gets displayed

<html xmlns="w3.org/1999/xhtml" ng-ap"> should be <html xmlns="w3.org/1999/xhtml" ng-app="name"> ? — Mahakala
– Mahakala, Commented Mar 4, 2016 at 16:03
@Mahakala, I tried adding the name but then I get "Uncaught Error: [$injector:modulerr] Failed to instantiate module TextApp due to: Error: [$injector:nomod] Module 'TextApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. — Coding Duchess
– Coding Duchess, Commented Mar 4, 2016 at 16:14
now it is a totally different question than the one I answered after the last update. — Salem Ouerdani
– Salem Ouerdani, Commented Mar 4, 2016 at 16:38
your new question should be solved by setting your app name ng-app="TextApp" in the wrapper HTML tag — Salem Ouerdani
– Salem Ouerdani, Commented Mar 4, 2016 at 16:42

Salem Ouerdani · Accepted Answer · 2016-03-04 16:33:08Z

1

You are using $('p').hide() and $('p').show() to hide/show DOM elements which looks more like jQuery methods to me. Your code sample is throwing this error :

ReferenceError: $ is not defined at Object.MyCtrl.$scope.toggleSuggest

Angular's ng-show or ng-hide directives should do the trick in this case :

<body ng-controller="BaseController">
    <div class="input-group" style="width: 50%;">
        <input type="text" ng-model="fnamequery">
        <p ng-repeat="fname in fnames | filter:fnamequery" ng-hide="fnamequery==''">{{fname}}</p>
    </div>
</body>

Controller:

function BaseController($scope, $http) {
    $scope.fnamequery = '';
    $scope.fnames = ["Aida", "Aidan", "Alla", "Allen", "Beverly", "Bea", "Caleb","Catherine"];
}

Here is a working jsFiddle.

edited Mar 4, 2016 at 16:33

answered Mar 4, 2016 at 16:15

Salem Ouerdani

8,0563 gold badges46 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Coding Duchess Over a year ago

Unfortunately did not work for me - no errors but nothing happend as I enter values into the textbox

Salem Ouerdani Over a year ago

did you check the jsFiddle link ? that was not the way you want it to work ? and either while typing in the input there is no errors shown in the console ?

Coding Duchess Over a year ago

Yes, fidlle looks good except when you enter one letter, it shows you all options plus an extra option 'false'. But still, somehow the same code does not work on my machine at all. Must be some directives I am missing

Salem Ouerdani Over a year ago

yeah sorry for the false :) I added it to your $scope.fnames as one more name so I can be sure it is interpreted as a string. no prob & good luck with that

Salem Ouerdani Over a year ago

thanks! one last thing that may save you more future issues or may not, I'm not sure as I never used both frameworks in a single project. I guess you did define jQuery as a global function, so maybe it is caused by the the use of $ sign as it is the case here or here.

Collectives™ on Stack Overflow

AngularJS text suggestion textbox

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest