CODEWITHSUNDEEP
javascripthtmlangularjssearchangularjs-ng-repeat
Superunknown
Superunknown

Reputation: 501

AngularJS Search delay until user enters field

Hi I'm relatively new to AngularJs. I know the basics and the essentials. However I'm trying to implement a search function for my website. It works...but not in the way I'd like it to.

Currently...there's a search box with data shown below it...and that's even before I've entered the data. As I type in the search box...it narrows down to the appropriate name. Pretty standard stuff. It's very similar to this jsfiddle:example jsfiddle

<body ng-app="personApp">
    <div class="container">
        <header></header>
        <div ng-controller="PersonListCtrl">
            <div class="bar">Search:
                <input ng-model="query">
            </div>
            <ul class="">
                <li ng-repeat="person in persons | filter:query">{{person.name}}</li>

and

var personApp = angular.module('personApp', []);

personApp.controller('PersonListCtrl', function ($scope, $http) {
    $http.get('data/persons.json').success(function (data) {
        $scope.persons = data;
    });
    $scope.persons = [{
        "name": "Mike Doe"
    }, {
        "name": "Jhon Doe"
    }, {
        "name": "Sam Doe"
    }, {
        "name": "Sam Doe"
    }, ];
});

I don't want this to happen. It's already searching through json file by default. I don't want any names visible until I enter a keyword and it shows the required information matching that keyword.

Is it possible to prevent this from happening while maintaining the same functionality?

Upvotes: 1

Views: 304

Answers (1)

haxtbh
haxtbh

Reputation: 3534

If you are looking to hide the list of people when there is nothing being search then just use a ng-show on the list of people.

Something like this:

<ul class="" ng-show="query">
    <li ng-repeat="person in persons | filter:query">{{person.name}}</li>

This will show the list only when query is true. query is false when its empty.

Updated Fiddle - http://jsfiddle.net/rCrGP/23/

Upvotes: 3

Related Questions