Splunk Web Framework Component Reference

SearchBarView

The SearchBar view

Description

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.

Documentation

Splunk views

How to use search controls using SplunkJS Stack

How to use search controls using Django Bindings

How to listen for events on views using SplunkJS Stack

Library path

splunkjs/mvc/searchbarview

Properties

Name	Default value	Description
id		Required. The unique ID for this control.
default		The default value.
managerid	`null`	The ID of the search manager to bind this view to.
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.
value		The current value of the search bar.

Methods

Name	Description
render	Draws the view to the screen. Called only when you create the view manually in JavaScript.
val	Returns the view's value if passed no parameters. Sets the view's value if passed a single parameter.

Events

Name	Description
change	Fired when the value of the view changes.

Example (Django tag)

{% block content %}
    {% searchbar id="example-searchbar" managerid="example-search" 
        value="$searchquery$"|token_safe 
        timerange_earliest_time="$earlyval$"|token_safe
        timerange_latest_time="$lateval$"|token_safe
        default="index=_internal | head 100" %}
{% endblock content %}

{% block managers %}
    {% searchmanager id="example-search" 
        search="$searchquery$"|token_safe
        earliest_time="$earlyval$"|token_safe
        latest_time="$lateval$"|token_safe
        preview=True 
        required_field_list="*" status_buckets=300 %}
{% endblock managers %}

Example (JavaScript)

<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/searchbarview"
    ];
    require(deps, function(mvc) {
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var SearchBarView = require("splunkjs/mvc/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() {
            // Update the search query
            mysearch.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.search.set(mysearchbar.timerange.val()); 

            // Run the search (because autostart=false)
            mysearch.startSearch();
        })

</script>