Angular Advanced Searchbox

Demo

Click on a suggested search parameter or use autocompletion feature and press 'Enter' to add new search parameter to your query. Use 'TAB', 'SHIFT+TAB', 'LEFT', 'RIGHT' or 'BACKSPACE' to navigate between search parameters.

Output:

{{searchParams}}

The output model could be directly used as params object for Angular's $http API.

Test: loading predefined search parameters via code:
Add predefined "Name" Search Parameter Load predefined Search Parameter Set

Getting started

Define the available search parameters in your controller's code:

$scope.availableSearchParams = [
  { key: "name", name: "Name", placeholder: "Name..." },
  { key: "city", name: "City", placeholder: "City...", restrictToSuggestedValues: true, suggestedValues: ['Berlin', 'London', 'Paris'] },
  { key: "country", name: "Country", placeholder: "Country..." },
  { key: "emailAddress", name: "E-Mail", placeholder: "E-Mail...", allowMultiple: true },
  { key: "job", name: "Job", placeholder: "Job..." }
];

Add the following AngularJS directive to your HTML:

<nit-advanced-searchbox ng-model="searchParams" parameters="availableSearchParams" placeholder="Search..."></nit-advanced-searchbox>

View Readme »