Neolithic Populous Metropolis
Have ideas to improve npm?Join in the discussion! »


1.1.77 • Public • Published
Angular ## Pure Angular Advanced Searchbox ![Bower version](     ![GitHub version](     ![Commits Since](     ![NPM Dependencies](     ![NPM Dev Dependencies](     ![Total Downloads](     ![Beerpay](
Pure Angular Advanced Search Box is an implementation to add advanced searching capabilities into a reusable UI to help build parameters based off of filters, queries and operators to send off to a search API.


  • Basic Search Query Input Box
  • Filters
  • Filter Selectors - Selectors for filters (Contains, Is Equal To, etc).
  • Operators - OR/AND support between filters to give more advanced searchbox functionality.
  • Grouping (In Progress)
  • Drag and Drop - Swap / Insert Before and After functionality for filters to change arrangement.
  • Validation - Validators on filters allows control over when search get's updated based on valid entries.
  • Middlewares - to modify values within filters after user input.
  • Externalized Configuration / HTML (In Progress)


  • Add grouping around conditionals (In Progress)
  • Build query (SOLR, SQL)
  • Add UI for validation
  • Externalizing templates
  • Update Live DEMO (In Progress)
  • Add ability to only update params via ENTER key or clicking Search Button

Known Bugs

  • Verified - Cannot read property 'store' of undefined - Thanks to @IbrahimHd (DONE)


Example 1

View Demo Here


  1. Install with bower:
    • bower install pure-angular-advanced-searchbox

The bower package contains files in the dist/ directory with the following includes:

  • ui.core.js
  • ui.core.min.js
  • main.css

Files with the min suffix are minified versions to be used in production.

Load the javascript/css and declare your angular dependency:

<!-- dependency includes -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" />
<!-- pure angular advanced searchbox -->
<script src="bower_components/pure-angular-advanced-searchbox/dist/scripts/ui.core.js"></script>
<link rel="stylesheet" href="bower_components/pure-angular-advanced-searchbox/dist/styles/main.css" />
angular.module('myModule', ['paasb']);

Example Directive Usage

  placeholder="Enter your query here..."

The searchbox will return data in JSON format and look something like:

   "query":"Nike Flex"



Define the available search parameters / filters in your project:

$scope.sOptions = [];
$scope.sFilters = [
      'name': 'dontFilterMe',
      'displayName': 'I don\'t want to be filtered!',
      'dontFilter': true
      'name': 'cpi',
      'displayName': 'CPI',
      'root': 'Product',
      'middleware': [function (val) {
        if(!isNaN(val)) {
          return (val * 2);
        return val;
      }, function (val) {
        return 'value:' + val;
    }, {
      'name': 'gender',
      'displayName': 'Vendor Gender',
      'suggestedValues': 'GENDER',
      'suggestedDataPoint': 'data',
      'reloadOnCreate': true,
      'restrictedSuggestedValues': true,
      'multi': true,
      'root': 'Product'
    }, {
      'name': 'upc',
      'displayName': 'UPC',
      'child': 'Size'
$scope.sConfig = {
    'delay': 1000, /* How long before paasb fires off a change event */
    'store': true /* Should we store our query/caching in local storage? */
    'showMagnifierAlways': false /* Should we keep magnifier or remove it when there is some sort of query/filter? */
$scope.sFilterOperators = [
    "name": "NOT"
    "name": "AND",
    "selected": true
  }, {
    "name": "OR"
$scope.sFilterSelectors = [
    "name": "Test",
    "key": "test"
    "name": "Contains",
    "key": "contains",
    "selected": true,
    "notAllowed": [
    "name": "Does not contain",
    "key": "doesNotContain",
    "notAllowed": [
    "name": "Is Equal To",
    "key": "isEqualTo"
    "name": "Is Not Equal To",
    "key": "isNotEqualTo"
    "name": "Starts with",
    "key": "startsWith"
    "name": "Ends with",
    "key": "endsWith"
    "name": "Similiarity",
    "key": "similiarity"

Available Directive Attributes

Name Description Type
search-params Object to store search parameters object
paasb-search-box-filtering Object array of filters to provide to searchbox array[object]
paasb-search-box-config Object for configuration parameters object
paasb-search-box-auto-complete Object for auto complete parameters object
paasb-search-box-cache-filter Should we enable caching of our filter(s)/query to local storage? boolean
paasb-search-box-enable-filtering-operators Should we enable filter operators (AND/OR)? By default paasb selects OR without this enabled. boolean
paasb-search-box-filter-selectors Allows you to define your own filter selectors outside of paasb's predefined selectors. array[object]
paasb-search-box-filter-operators Allows you to define your own filter operators outside of paasb's predefined operators. array[object]
placeholder Placeholder text for searchbox string

Available Events

Event Name Description
onRegisterApi Gain access to internal APIs exposed by paasb such as Filtering, Placeholding, Loader, etc.
onChange Fired every time a change occurs on search box.
onQueryAdded Fired only when a query initially get's added - will respects delays.
onQueryRemoved Fired only when a query is removed - will respects delays.
onQueryChanged Fired only when a query is changed.
onFilterAdded Fires when a filter initially get's added to search.
onFilterRemoved Fires when a filter is removed from search.
onOperatorChanged Fires when a operator get's changed.
onFilterSelectorChanged Fires when a filter selector changes.
onEraser Fires when eraser is triggered.
onGarbage Fires when garbage is triggered.
onEnteredEditMode Fires when your within a editing mode.
onLeavedEditMode Fires when your leaving a editing mode.


$scope.$on('onRegisterApi', function(ev, api) {
    console.log('api!', api);
        .on('onChange', function (ev, params) {
            console.log('parameters!', params);

Available Search Filter Properties

Name Description Type
name Unique key of the search filter. string
displayName User friendly display name of the search parameter. string
middleware Middlewares allow you to alter the values after being entered and validated by paasb; this will only show within the updated parameters, not shown visibly within the UI. array[function]
multi Should multiple search filters of the same key be allowed? Default is false boolean
validation Provides validation to filters; only allowing updates to searchbox when correct inputs are entered. string
suggestedValues An array of suggested search values, e.g. ['A', 'B', 'C', 'D'], can take a config from search configuration, url, or an array string[], string
suggestedDataPoint If an API endpoint (URL) is used via suggestedValues; sometimes the data is stored within an object from the response. string
restrictedSuggestedValues Should it restrict possible search values to the ones from the suggestedValues array? Default is false. boolean
reloadOnCreate Should we reload the suggested values when you re-open the filter? This only works when a URL is provided. Default is false. boolean
root Is this a root level filter? This usually helps derive filters to different tables if necessary. string
child Is this a child level filter? This usually helps derive filters to different tables if necessary. string

Available Search Validations

  • Validation providers are separated with a space between them (min=3 email). If a validation provider is given that is unknown to paasb; it will be ignored. Custom validator's can be written. ** NOTE ** There is currently no UI that tell's you whether something was / or was not validated; it just works - this is currently in the process of being developed.
    "validation": "length=12 email"
  • Length length=3 String Length must be exactly X characters.
  • Min min=3 String Length must be at least X characters.
  • Max max=6 String Length must be under X characters.
  • Email email Must match a valid e-mail address format.
  • Phone phone Must match a valid phone number format.
  • Between between(3,6)duplicates min and max functionality.
  • Numeric numeric Is this a numeric value?

Available Search Configuration Properties

  <td>Would you like to provide a delay before the search parameters get updated? Default is <b>null</b>.  If no delay is provided, then automatic updates will not be triggered.</td>
  <td>Custom configuration property that can be injected into filter parameters; useful when using constants via <b>suggestedValues</b></td>
Name Description Type
autoCompleteUrl API endpoint to auto suggestor; paasb sends query as plain text via interpolation ({{query}}) string
placeholders Used for scrolling animated placeholders for search input; will basically type out your placeholder, then replace it with another. array
placeholderInterval How long should the placeholder stay on the screen once it's fully written out?. (Default is 2000ms) number
placeholderSpeedOutInterval How fast placeholder text should be deleted per character. (Default is 25ms) number
placeholderSpeedInInterval How fast placeholder text should be inserted per character. (Default is 75ms) number
store Should we store our query/caching in local storage? Default is false boolean
showMagnifierAlways Should we keep magnifier or remove it when there is some sort of query/filter? Default is true. boolean


npm i pure-angular-advanced-searchbox

DownloadsWeekly Downloads






Last publish


  • avatar