Don't start autocompleting if search is empty string

index.html

@@ -17,6 +17,7 @@ <h1><span class="thin">AngularJS:</span> Allmighty-Autocomplete Demo</h1>
     <div class="main">
       <h2>Search for new released movies:</h2>
       <autocomplete ng-model="result" attr-placeholder="type to search movies..." click-activation="true" data="movies" on-type="doSomething" on-select="doSomethingElse"></autocomplete>
+      <button ng-click="clearSearch()">Clear Search</button>
       <br>
       <div class="description">
         This is a simple autocomplete directive for AngularJS, packaged in a Angular module. You can check out the source code or download it here:

script/app.js

@@ -38,6 +38,10 @@ app.controller('MyCtrl', function($scope, MovieRetriever){
     return $scope.movies;
   }
 
+  $scope.clearSearch = function() {
+    $scope.result = '';
+  };
+
   $scope.doSomething = function(typedthings){
     console.log("Do something like reload data with this: " + typedthings );
     $scope.newmovies = MovieRetriever.getmovies(typedthings);

script/autocomplete.js

@@ -47,7 +47,7 @@ app.directive('autocomplete', function() {
           return;
         }
 
-        if(watching && typeof $scope.searchParam !== 'undefined' && $scope.searchParam !== null) {
+        if(watching && $scope.searchParam) {
           $scope.completing = true;
           $scope.searchFilter = $scope.searchParam;
           $scope.selectedIndex = -1;

style/style.css

@@ -24,6 +24,15 @@ a:hover{
   transition: 0.1s all ease-in-out;
 }
 
+.main button {
+  padding: 8px 16px;
+  font-size: 1.2em;
+  background: #eee;
+  border: 1px solid #999;
+  color: #444;
+  margin: 20px;
+}
+
 body{
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 	min-height:100%;