signalpoint/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A big thanks goes out to Sandeep Panda and his blog showing how to
build an autocomplete for an Angular JS application.
http://www.htmlxprs.com/post/32/creating-an-angularjs-autocomplete-tag-input-widget

  
## app.js
'use strict';

angular.module('angularDrupalApp', ['my-module']).
  run(function() {

    // Typical app stuff here...

  });

angular.module('my-module',[]).directive('autoComplete',['$http',function($http){
    return {
        restrict:'AE',
        scope:{
        },
        templateUrl:'/autocomplete-template.html',
        link:function(scope,elem,attrs){
          scope.suggestions=[];
          scope.selectedIndex=-1; //currently selected suggestion index
          scope.search=function(){
               $http.get(attrs.url+'?title='+scope.searchText).success(function(data){
                   console.log(data);
                   if(data.indexOf(scope.searchText)===-1){
                       data.unshift(scope.searchText);
                   }
                   scope.suggestions=data;
                   scope.selectedIndex=-1;
               });
          }
          scope.checkKeyDown=function(event){
             if(event.keyCode===40){//down key, increment selectedIndex
                 event.preventDefault();
                 if(scope.selectedIndex+1 !== scope.suggestions.length){
                     scope.selectedIndex++;
                 }
             }
             else if(event.keyCode===38){ //up key, decrement selectedIndex
                 event.preventDefault();
                 if(scope.selectedIndex-1 !== -1){
                     scope.selectedIndex--;
                 }
             }
             else if(event.keyCode===13){ //enter pressed
                 scope.resultClicked(scope.selectedIndex);
             }
          }
          scope.resultClicked=function(index){
            alert('you selected: ' + scope.suggestions[index].nid);
                   scope.searchText='';
                   scope.suggestions=[];
          }
        }
   }
}]);

## autocomplete-template.html
<div class="tags-wrapper">
    <div id="tagsList" class="tags-cloud">
        <input type="text" placeholder="Start typing" id="searchInput" ng-keydown="checkKeyDown($event)" class="form-control" ng-model="searchText" ng-change="search()"/>
    </div>
    <ul id="suggestions" class="suggestions-list">
       <li ng-repeat="suggestion in suggestions" class="blockSpan" ng-click="resultClicked($index)" ng-mouseover="$parent.selectedIndex=$index" ng-class="{active : selectedIndex===$index}">{{suggestion.title}}</li>
     </ul>
</div>

## autocomplete.css
.active {
  color: red;
}

## usage.html
<!-- include in the <head> -->
<link rel="stylesheet" type="text/css" href="autocomplete.css">

<!-- include somewhere in your app's <body> as a directive -->
<div auto-complete url="/drupal/api/course-locator.json" model="data.tags"></div>
	'use strict';

	angular.module('angularDrupalApp', ['my-module']).
	run(function() {

	// Typical app stuff here...

	});

	angular.module('my-module',[]).directive('autoComplete',['$http',function($http){
	return {
	restrict:'AE',
	scope:{
	},
	templateUrl:'/autocomplete-template.html',
	link:function(scope,elem,attrs){
	scope.suggestions=[];
	scope.selectedIndex=-1; //currently selected suggestion index
	scope.search=function(){
	$http.get(attrs.url+'?title='+scope.searchText).success(function(data){
	console.log(data);
	if(data.indexOf(scope.searchText)===-1){
	data.unshift(scope.searchText);
	}
	scope.suggestions=data;
	scope.selectedIndex=-1;
	});
	}
	scope.checkKeyDown=function(event){
	if(event.keyCode===40){//down key, increment selectedIndex
	event.preventDefault();
	if(scope.selectedIndex+1 !== scope.suggestions.length){
	scope.selectedIndex++;
	}
	}
	else if(event.keyCode===38){ //up key, decrement selectedIndex
	event.preventDefault();
	if(scope.selectedIndex-1 !== -1){
	scope.selectedIndex--;
	}
	}
	else if(event.keyCode===13){ //enter pressed
	scope.resultClicked(scope.selectedIndex);
	}
	}
	scope.resultClicked=function(index){
	alert('you selected: ' + scope.suggestions[index].nid);
	scope.searchText='';
	scope.suggestions=[];
	}
	}
	}
	}]);
	<div class="tags-wrapper">
	<div id="tagsList" class="tags-cloud">
	<input type="text" placeholder="Start typing" id="searchInput" ng-keydown="checkKeyDown($event)" class="form-control" ng-model="searchText" ng-change="search()"/>
	</div>
	<ul id="suggestions" class="suggestions-list">
	<li ng-repeat="suggestion in suggestions" class="blockSpan" ng-click="resultClicked($index)" ng-mouseover="$parent.selectedIndex=$index" ng-class="{active : selectedIndex===$index}">{{suggestion.title}}</li>
	</ul>
	</div>
	<!-- include in the <head> -->
	<link rel="stylesheet" type="text/css" href="autocomplete.css">

	<!-- include somewhere in your app's <body> as a directive -->
	<div auto-complete url="/drupal/api/course-locator.json" model="data.tags"></div>