From 786e8623d499612fa4b8fb87207970cfad25bb99 Mon Sep 17 00:00:00 2001
From: Chuck Haines <chaines@codemonkeyjava.com>
Date: Tue, 17 Mar 2015 12:34:12 -0500
Subject: [PATCH] Add maxlength attribute which will be applied to the input
 field

---
 README.md                     | 1 +
 angucomplete-alt.js           | 6 +++++-
 example/index.html            | 2 +-
 test/angucomplete-alt.spec.js | 8 ++++++++
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6a35530c..dfd0c609 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,7 @@ var app = angular.module('app', ["angucomplete-alt"]);
 | :------------- |:-------------| :-----:| :-----|
 | id | A unique ID for the field. [example](http://ghiden.github.io/angucomplete-alt/#example1) | Yes | members |
 | placeholder | Placeholder text for the search field. [example](http://ghiden.github.io/angucomplete-alt/#example1) | No | Search members |
+| maxlength | Maxlength attribute for the search field. [example](http://ghiden.github.io/angucomplete-alt/#example1) | No | 25 |
 | pause | The time to wait (in milliseconds) before searching when the user enters new characters. [example](http://ghiden.github.io/angucomplete-alt/#example1) | No | 400 |
 | selected-object | Either an object in your scope or callback function. If you set an object, it will be two-way-bound data as usual. If you set a callback, it gets called when selection is made. [example](http://ghiden.github.io/angucomplete-alt/#example1) | Yes | selectedObject or objectSelectedCallback |
 | remote-url | The remote URL to hit to query for results in JSON. angucomplete will automatically append the search string on the end of this, so it must be a GET request. [example](http://ghiden.github.io/angucomplete-alt/#example5) | No | http://myserver.com/api/users/find?searchstr= |
diff --git a/angucomplete-alt.js b/angucomplete-alt.js
index 46eb3928..81cd92a1 100644
--- a/angucomplete-alt.js
+++ b/angucomplete-alt.js
@@ -36,6 +36,7 @@
     var KEY_TAB =  9;
 
     var MIN_LENGTH = 3;
+    var MAX_LENGTH = 524288;  // the default max length per the html maxlength attribute
     var PAUSE = 500;
     var BLUR_TIMEOUT = 200;
 
@@ -48,7 +49,7 @@
     // Set the default template for this directive
     $templateCache.put(TEMPLATE_URL,
         '<div class="angucomplete-holder" ng-class="{\'angucomplete-dropdown-visible\': showDropdown}">' +
-        '  <input id="{{id}}_value" ng-model="searchStr" ng-disabled="disableInput" type="{{type}}" placeholder="{{placeholder}}" ng-focus="onFocusHandler()" class="{{inputClass}}" ng-focus="resetHideResults()" ng-blur="hideResults($event)" autocapitalize="off" autocorrect="off" autocomplete="off" ng-change="inputChangeHandler(searchStr)"/>' +
+        '  <input id="{{id}}_value" ng-model="searchStr" ng-disabled="disableInput" type="{{type}}" placeholder="{{placeholder}}" maxlength="{{maxlength}}" ng-focus="onFocusHandler()" class="{{inputClass}}" ng-focus="resetHideResults()" ng-blur="hideResults($event)" autocapitalize="off" autocorrect="off" autocomplete="off" ng-change="inputChangeHandler(searchStr)"/>' +
         '  <div id="{{id}}_dropdown" class="angucomplete-dropdown" ng-show="showDropdown">' +
         '    <div class="angucomplete-searching" ng-show="searching" ng-bind="textSearching"></div>' +
         '    <div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)" ng-bind="textNoResults"></div>' +
@@ -654,6 +655,9 @@
         // set strings for "Searching..." and "No results"
         scope.textSearching = attrs.textSearching ? attrs.textSearching : TEXT_SEARCHING;
         scope.textNoResults = attrs.textNoResults ? attrs.textNoResults : TEXT_NORESULTS;
+        
+        // set max length (default to maxlength deault from html
+        scope.maxlength = attrs.maxlength ? attrs.maxlength : MAX_LENGTH;
 
         // register events
         inputField.on('keydown', keydownHandler);
diff --git a/example/index.html b/example/index.html
index 7b4ebdeb..4bad9cd4 100644
--- a/example/index.html
+++ b/example/index.html
@@ -50,7 +50,7 @@ <h2>Awesome Autocompleteness for AngularJS</h2>
 
         <h3><a name="example1" class="page-anchor">Example 1 - Countries of the World</a></h3>
         <div class="padded-row">
-          <div angucomplete-alt id="ex1" placeholder="Search countries" pause="100" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" minlength="1" input-class="form-control form-control-small" match-class="highlight">
+          <div angucomplete-alt id="ex1" placeholder="Search countries" maxlength="50" pause="100" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" minlength="1" input-class="form-control form-control-small" match-class="highlight">
           </div>
         </div>
         <div class="result">
diff --git a/test/angucomplete-alt.spec.js b/test/angucomplete-alt.spec.js
index 2fd85a7f..9e0cce23 100644
--- a/test/angucomplete-alt.spec.js
+++ b/test/angucomplete-alt.spec.js
@@ -35,6 +35,14 @@ describe('angucomplete-alt', function() {
       $scope.$digest();
       expect(element.find('#ex1_value').attr('placeholder')).toEqual('Search countries');
     });
+      
+    it('should render maxlength string', function() {
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search countries" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" maxlength="25" />');
+      $scope.selectedCountry = null;
+      $compile(element)($scope);
+      $scope.$digest();
+      expect(element.find('#ex1_value').attr('maxlength')).toEqual('25');
+    });
 
   });