You use the sfSearchBox to enable the visitors to search your website. The directive provides interface for user input used by the searching functionality.
sfSearchBox
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.
The search box directive exposes the following attributes:
sf-action
sf-min-text-length
sfAction
sf-placeholder
sf-enable-suggestions
sfGetSuggestions
sf-get-suggestions
sfEnableSuggestions
sf-clear-search-string
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:
DesignerView.YourView.json
JSON
designerview-yourview.js
DesignerView.YourView.cshtml
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.
Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.
This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.
This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.
The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important