angular-search

angular-search

A lightweight Angular search widget

dependencies

• angular 1.x

features

• lightweight
• configurable behavior
• supports both basic and pro user interactions
  • Click the loupe icon, press the word "Enter", or press the [ENTER] key to search
  • Press the "x" icon, or press the [ESC] key to clear a search
• supports any number of search instances on one page
• 100% test coverage

installation

# using bower:
bower install --save angular-search

# .. or, using NPM:
npm install --save angular-search

usage

<div ng-controller="mainCtrl">
	<search
		class="size-medium"
		param="searchText"
		placeholder="Search"
		search="search($param)"
	></search>
	<a ng-click="clear()">Clear</a>
</div>

angular
.module('demo', ['turn/search'])
.controller('mainCtrl', function ($scope) {

	angular.extend($scope, {
		searchText: '',
		clear: function() {
			$scope.searchText = '';
			$scope.search();
		},
		search: function (param) {

			...

		}
	});

});

options

<search
	<!-- css class(es) -->
	class="size-medium"

	<!-- disable the input when $scope.foo evaluates to true -->
	disabled="foo"

	<!-- param to update in the model when the user presses ENTER -->
	param="searchText"

	<!-- placeholder text when the input is empty -->
	placeholder="Search"

	<!--
		search function to call (passed the search string),
		should be defined on the controller's $scope
	-->
	search="fn($param)"

	<!-- submit onKeyUp rather than onSubmit -->
	typeAhead="true"
></search>

hacking on it

bower install
npm install
grunt watch

running the demo

bower install
npm install
node server/index

then open demo/index.html in a browser

running the tests

bower install
npm install
grunt test