The SearchBar view provides a search query and a built-in TimeRange view for controlling a search manager.
Note To allow the SearchBar view to modify its search manager, you must use tokens or set up a change handler as shown in the examples below.
Name | Default value | Description |
id | Required. The unique ID for this control. | |
autoOpenAssistant | true | Indicates whether to automatically open the search assistant while the search bar is being typed in. Applies only when useAssistant is set to true. |
default | The default value. | |
managerid | null | The ID of the search manager to bind this view to. |
searchAssistant | The type of search helper to use (autocomplete | assistant | none). | |
settings | The properties of the view. See the methods below to get and set values. | |
timerange_* | Dynamic properties of the internal timerange created by the search bar. For example, timerange_value corresponds to the value property of the internal timerange. | |
timerange | true | Indicates whether to display a TimeRange view. |
useAssistant | true | Deprecated. Indicates whether to display the search assistant. |
useSyntaxHighlighting | true | Indicates whether to display syntax highlighting for the search string. |
value | The current value of the search bar. |
Name | Description |
render | Draws the view to the screen. Called only when you create the view manually. |
settings.get(property ) | Returns the value of property for the current component. |
settings.set(property, value ) | Sets the value of property to the specified value for the current component. |
val | Returns the view's value if passed no parameters. Sets the view's value if passed a single parameter. |
Name | Description |
change | Fired when the value of the view changes. |
require([ "splunkjs/mvc/searchmanager", "splunkjs/mvc/searchbarview", "splunkjs/mvc/simplexml/ready!" ], function(SearchManager, SearchBarView) { // Create the search manager var mysearch = new SearchManager({ id: "example-search", status_buckets: 300, required_field_list: "*", preview: true, cache: true, autostart: false, // Prevent the search from running automatically search: "index=_internal | head 500" }); // Create the searchbar var mysearchbar = new SearchBarView({ id: "example-searchbar", managerid: "example-search", el: $("#mysearchbarview") }).render(); // Listen for changes to the search query portion of the searchbar mysearchbar.on("change", function() { // Reset the search query (allows the search to run again, // even when the query is unchanged) mysearch.settings.unset("search"); // Update the search query mysearch.settings.set("search", mysearchbar.val()); // Run the search (because autostart=false) mysearch.startSearch(); }); // Listen for changes to the built-in timerange portion of the searchbar mysearchbar.timerange.on("change", function() { // Update the time range of the search mysearch.settings.set(mysearchbar.timerange.val()); // Run the search (because autostart=false) mysearch.startSearch(); }); });