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