Search code examples
office-ui-fabric

Office UI Perform Search in SearchBox


I am new using Office UI Fabric JS, and I have just imported a SearchBox by following the steps here. But how do I obtain the query and perform the search when the user hits enter? I have a search function already written in javascript, but I do not know where to call it. Is there some onSearch like property for the SearchBox?

Also, what exactly is happening within the <script>...</script> tags? I am not able to figure out what the following line means from the above link.

Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all SearchBox components on the page


Solution

  • Okay so here is what I did. First you add an id element in the HTML for the input field.

    <input class="ms-SearchBox-field" type="text" value="", id="searchText">
    

    Then in my JS file, I added the following:

    $('#searchText').on("keypress", function (e) {
        if (e.which == 13) {    // 13 is for enter
            // call search function here
        }
    });
    

    I was using JQuery already so it helped.