pure-angular-advanced-searchbox v1.1.77

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.

Features

• 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)

TODOs

• 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)

Screenshots

View Demo Here

Usage

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

<paasb-search-box
  search-params="sOptions"
  paasb-search-box-filtering="sFilters"
  paasb-search-box-enable-filtering-operators="true"
  paasb-search-box-config="sConfig"
  paasb-search-box-auto-complete="sConfig"
  paasb-search-box-cache-filter="true"
  paasb-search-box-filter-selectors="sFilterSelectors"
  paasb-search-box-filter-operators="sFilterOperators"
  placeholder="Enter your query here..."
</paasb-search-box>

Description

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

{  
   "filters":[  
      {  
         "condition":"contains",
         "value":"NK",
         "name":"vendor_abbr",
         "$$timestamp":1468518875834,
         "$$modified":1468518875834
      },
      {  
         "condition":"contains",
         "value":"Yellow",
         "name":"color",
         "$$timestamp":1468518875834,
         "$$modified":1468518875834,
         "$$operator":"AND"
      }
   ],
   "operators":[  
      "AND"
   ],
   "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": [
      "restrictedSuggestedValues"
    ]
  },
  {
    "name": "Does not contain",
    "key": "doesNotContain",
    "notAllowed": [
      "restrictedSuggestedValues"
    ]
  },
  {
    "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

Available Events

Example:

$scope.$on('onRegisterApi', function(ev, api) {

	console.log('api!', api);

	api
		.on('onChange', function (ev, params) {

			console.log('parameters!', params);

		});

});

Available Search Filter Properties

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

<tr>
  <td>delay</td>
  <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>number</td>
</tr>
<tr>
  <td>&lt;configName&gt;</td>
  <td>Custom configuration property that can be injected into filter parameters; useful when using constants via <b>suggestedValues</b></td>
  <td>string</td>
</tr>