From 8367998dbed7d99d0c32ab81ed3a7f708e33b26a Mon Sep 17 00:00:00 2001
From: James Blashill <james@blashill.com>
Date: Wed, 22 Jul 2015 13:27:46 -0400
Subject: [PATCH] Don't start autocompleting if search is empty string

The primary use case is explicitly resetting search value from outside
via ng-model. With this change, the autocomplete popup will not be
shown when this happens
---
 index.html             | 1 +
 script/app.js          | 4 ++++
 script/autocomplete.js | 2 +-
 style/style.css        | 9 +++++++++
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a0569ca..0aa6e61 100644
--- a/index.html
+++ b/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:
diff --git a/script/app.js b/script/app.js
index be9cd3a..602ae04 100644
--- a/script/app.js
+++ b/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);
diff --git a/script/autocomplete.js b/script/autocomplete.js
index 377ad0f..92302a8 100644
--- a/script/autocomplete.js
+++ b/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;
diff --git a/style/style.css b/style/style.css
index cc370d6..35dac01 100644
--- a/style/style.css
+++ b/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%;