Use a search box directive

You use the sfSearchBox to enable the visitors to search your website. The directive provides interface for user input used by the searching functionality.

The sfSearchBox is a directive with an isolated scope that is defined in a module with the same name sfSearchBox. You can use the directive as an attribute or as an element.

Attributes

The search box directive exposes the following attributes:

Attribute	Description
sf-action	This attribute accepts a delegate to a function with one argument defined in the current scope. The search box invokes this delegate when the typed text is to be applied.
sf-min-text-length	This attribute is an optional parameter. It is an integer specifying what is the minimum length of user input, so that the sfSearchBox directive calls sfAction. For example, if you set this attribute to -1, then the directive invokes sfAction on any change in the search box, independently of the length of the input.
sf-placeholder	This attribute is an optional parameter. It enables you to specify a placeholder for the input without changing the template.
sf-enable-suggestions	This attribute activates the suggestions functionality. To use the functionality, you must combine the sf-enable-suggestions attribute with the sfGetSuggestions attribute below.
sf-get-suggestions	When you use the sfEnableSuggestions attribute, the sfGetSuggestions attribute accepts a delegate to a function with one argument defined in the current scope. This function must always return a promise that resolves into an array of strings that present the appropriate suggestions for the query provided in the arguments.
sf-clear-search-string	This attribute clears the text typed in search box. The value of the attribute must be a property in your scope.

Add a search box directive

The following example demonstrates how to add a search box directive in a widget designer's view.

To enable AngularJavaScript to link the sfSearchBox directive in your custom designer view, you must load the script of the directive and add a dependency to the module:

1. In the DesignerView.YourView.json file, add a scripts array. As a result, the file content should be similar to the following:

   {
      "priority": 1,
      "components" : ["sf-search-box"]
   }

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

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

3. In your DesignerView.YourView.cshtml file, place the following tag where you want to render the sfSearchBox directive:

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

   The following example passes a delegate to the search box to let the directive choose when the query needs to be applied, based on the attributes. In addition, you enable the suggestions functionality and define a suggest function. The function calls a service that gets items based on the current query. The resulting promise is returned after extracting the titles of the items.

4. In your designer's controller, add the following code:

   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 });
     });
   };