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.
For more information, see Isolating the Scope of a Directive.

Attributes

The search box directive exposes the following attributes:

Add a search box directive

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

To enable AngularJS 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.
Perform the following:

1. Sitefinity CMS automatically registers the scripts you need and, if no other designer view with explicitly set priority exists, Sitefinity CMS sets your designer view priority 1. In case you need to have full control over the scripts that are loaded or you want to set custom priority, you can alternatively create your own DesignerView.YourView.json file. If you have a JSON file that matches the convention (even if empty), this automatic scripts registration will not occur. In the DesignerView.YourView.json file, add a scripts array. As a result, the file content should be similar to the following:

   JSON

   {
     "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:

   JavaScript

   (function () {
   
       //add the following snippet before the definition of the custom controller:
       var designerModule = angular.module('designer');
       angular.module('designer').requires.push('sfFields');
       angular.module('designer').requires.push('sfSelectors');
   
   })();

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

   HTML

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

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