angular

Google style search box

By: Ryan Wong at

Below I will show you how to make the search box effect google does.

First the search bar is in middle of the page. Then it moves up if typed in.

HTML:

1
2
3
4
5
6
7
8
9
<div class="w90 mx-auto"  ng-style="searchStyle()">
    <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for Blogs" name="query" ng-model="search.query" ng-change="searchChange()">
          <span class="input-group-btn">
            <button class="btn btn-green w125" ng-click="search()">Search</button>
          </span>
        </div>
  </div>
<br/>

Angular:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function blogsCtrl($scope){
  $scope.search = {
  query:"",
  hasInput:false
  };
  $scope.searchStyle = function(){
    if ($scope.search.hasInput){
   return {
       'margin-top': '0%'
   };
    }else{
   return {
       'margin-top': '15%'
   };
    }
  }
  $scope.searchChange = function(){
   if ($scope.search.query.length > 0){
    $scope.search.hasInput = true;
    return true;
  }
    $scope.search.hasInput = false;
    return true;
  };
}

CSS:

1
2
3
4
5
6
7
8
.w90{
    width: 90%;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}