pure-angular-advanced-searchbox

## Pure Angular Advanced Searchbox                               

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

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.

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

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

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

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