Use a search box directive

The 'sfSearchBox' directive provides interface for user input that is appropriate for searching.

Attributes

sf-action

sfAction expects delegate to a function with one argument defined in the current scope. The search box will invoke this delegate when the typed text has to be applied.

sf-min-text-length

sfMinTextLength is an optional parameter. It should be an integer specifying what is the minimum length of the user input for the directive to call sfAction. If set to -1 then sfAction will be invoked on any change no matter the length of the input.

sf-placeholder

sfPlaceholder is an optional attribute that enables you to specify a placeholder for the input without changing the template.

sf-enable-suggestions

If sfEnableSuggestions attribute is present then the suggestions functionality will be activated. It should be used together with sfGetSuggestions attribute. See the sfGetSuggestions attribute description for more information.

sf-get-suggestions

When sfEnableSuggestions is present sfGetSuggestions expects a delegate to a function with one argument defined in the current scope. This function should always return a promise that resolves into an array of strings that are the appropriate suggestions for the given query which is provided in the arguments.

Usage:

The sfSearchBox is a directive with an isolated scope that is defined in a module with the same name (sfSearchBox). It can be used as an attribute or an element.

Markup:

   <sf-search-box sf-placeholder="Narrow by typing" sf-action="applyQuery(query)" sf-enable-suggestions sf-get-suggestions="suggest(query)"> </sf-search-box>

Angular JavaScript:

   scope.applyQuery = function (query) {
      scope.query = query;
   };

   scope.suggest = function (query) {
      return itemService.getItemsContaining(query).then(function (data) {
         return data.map(function (item) { return item.title });
      });
   };

This example passes a delegate to the search box in order to let the directive choose when the query should be applied based on the attributes.

Suggestions are enabled and a suggest function is defined. It calls a service that gets items based on the current query. The resulting promise is returned after extracting the titles of the items.

Adding sfSearchBox in a designer view:

For AngularJs to link the sfSearchBox directive in your custom designer view the script of the directive has to be loaded and a dependency to the module has to be added.

1. In your DesignerView.YourView.json file you have to add a scripts array. The content of the file should be similar to:

   {
      "scripts": [
        "client-components/search/sf-search-box.js"
        ]
   }

2. In your designerview-yourview.js place the following snippet right before the definition of your custom view controller:

   var designerModule = angular.module('designer');
   angular.module('designer').requires.push('sfSearchBox');