Search Bar

The search bar component is used to search for page content. It can be placed in the header or within the page content.

Note
This component has been DEPRECATED since Tizen 2.4 and will be deleted in Tizen 3.0.
To support Backward compatibility, please import tau.support-2.3.js.
Since 2.4, SearchBar component has been renamed to SearchInput. To use this component, see SearchInput component.

Table of Contents

  1. Default Selectors
  2. Manual Constructor
  3. HTML Examples
  4. Options
  5. Methods

Default Selectors

By default, all <input> elements with the type="search" or type="tizen-search" attribute are displayed as search bars. In addition, all elements with the data-type="search", data-type="tizen-search", or class="ui-searchbar" attribute are displayed as search bars.

Manual Constructor

To manually create a search bar component, use the component constructor from the tau namespace (RECOMMENDED):

<div data-role="page" id="search-bar-page">
   <div data-role="header">
      <label for="search-bar">Search Input:</label>
      <input name="search" id="search-bar"/>
   </div>
   <div data-role="content" id="search-bar-content">
      <ul data-role="listview">
         <li>Hairston</li>
         <li>Hansbrough</li>
         <li>Allred</li>
         <li>Hanrahan</li>
         <li>Egan</li>
         <li>Dare</li>
      </ul>
   </div>
   <script>
      (function (document) 
      {
         var inputElement = document.getElementById("search-bar"),
             contentElement = document.getElementById("search-bar-content"),
             contentChildren = contentElement.getElementsByTagName("li"),
             contentChildrenLength = contentChildren.length,
             pageElement = document.getElementById("search-bar-page"),
             searchBar;

         function changeHandle(event) 
         {
            var i,
                child,
                childText,
                value = searchBar.value();

            for (i = 0; i < contentChildrenLength; i++) 
            {
               child = contentChildren.item(i);
               childText = child.textContent.toLowerCase();
               if (!value || ~childText.indexOf(value)) 
               {
                  child.style.display = "block";
               } 
               else 
               {
                  child.style.display = "none";
               }
            }
         }

         function createPageHandle() 
         {
            searchBar = tau.widget.SearchBar(inputElement, {icon: "call"});
            searchBar.on("change keyup", changeHandle);
         }

         pageElement.addEventListener("pagecreate", createPageHandle);
      }(document));
   </script>
</div>

The constructor requires an HTMLElement parameter to create the component, and you can get it with the document.getElementById() method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.

If the jQuery library is loaded, you can use its method (support for backward compatibility):

<div data-role="page" id="search-bar-page">
   <div data-role="header">
      <label for="search-bar">Search Input:</label>
      <input name="search" id="search-bar"/>
   </div>
   <div data-role="content" id="search-bar-content">
      <ul data-role="listview">
         <li>Hairston</li>
         <li>Hansbrough</li>
         <li>Allred</li>
         <li>Hanrahan</li>
         <li>Egan</li>
         <li>Dare</li>
      </ul>
   </div>
   <script>
      (function (document) 
      {
         var inputElement = document.getElementById("search-bar"),
             contentElement = document.getElementById("search-bar-content"),
             contentChildren = contentElement.getElementsByTagName("li"),
             contentChildrenLength = contentChildren.length,
             pageElement = document.getElementById("search-bar-page");

         function changeHandle(event) 
         {
            var i,
                child,
                childText,
                value = inputElement.value;

            for (i = 0; i < contentChildrenLength; i++) 
            {
               child = contentChildren.item(i);
               childText = child.textContent.toLowerCase();
               if (!value || ~childText.indexOf(value)) 
               {
                  child.style.display = "block";
               } 
               else 
               {
                  child.style.display = "none";
               }
            }
         }

         function createPageHandle() 
         {
            $("#search-bar").searchbar(inputElement, {icon: "call"}).on("change keyup", changeHandle);
         }

         $("#search-bar-page").on("pagecreate", createPageHandle);
      }(document));
   </script>
</div>

HTML Examples

To create a search bar in the header:

<div data-role="page" id="search-bar-page">
   <div data-role="header">
      <label for="search-bar">Search Input:</label>
      <input type="search" name="search" id="search-bar"/>
   </div>
   <div data-role="content" id="search-bar-content">
      <ul data-role="listview">
         <li>Hairston</li>
         <li>Hansbrough</li>
         <li>Allred</li>
         <li>Hanrahan</li>
         <li>Egan</li>
         <li>Dare</li>
      </ul>
   </div>
   <script>
      (function (document) 
      {
         var inputElement = document.getElementById("search-bar"),
             contentElement = document.getElementById("search-bar-content"),
             contentChildren = contentElement.getElementsByTagName("li"),
             contentChildrenLength = contentChildren.length;

         function changeHandle(event) 
         {
            var i,
                child,
                childText,
                value = inputElement.value;

            for (i = 0; i < contentChildrenLength; i++) 
            {
               child = contentChildren.item(i);
               childText = child.textContent.toLowerCase();
               if (!value || ~childText.indexOf(value)) 
               {
                  child.style.display = "block";
               } 
               else 
               {
                  child.style.display = "none";
               }
            }
         }

         inputElement.addEventListener("change", changeHandle);
         inputElement.addEventListener("keyup", changeHandle);
      }(document));
   </script>
</div>

Options

The following table lists the options for the search bar component.

Option Input type Default value Description
data-cancel-btn boolean false Sets whether the cancel button is shown.
data-icon string | null null Icon type on the action button.
Possible values are the same as in the button component. If the option is not set, the action button is not shown.

Methods

To call a method on the component, use one of the existing APIs:

  • TAU API (RECOMMENDED):

    <script>
   var searchBarElement = document.getElementById('search-bar'),
       searchBar = tau.widget.SearchBar(searchBarElement);

   searchBar.methodName(methodArgument1, methodArgument2, ...);
</script>

  • jQuery API (support for backward compatibility):

    <script>
   $(".selector").searchbar('methodName', methodArgument1, methodArgument2, ...);
</script>

Summary

Method Description 
SearchBar disable (  )

Disables the search bar.

 
SearchBar enable (  )

Enables the search bar.

 
string value ( string? value )

Gets or sets an input text value.
disable

Disables the search bar.

SearchBar disable ( )

The method sets the disabled attribute for the search bar and changes the look of the search bar to the disabled state.

Return value:

Type Description
SearchBar Returns this.

Code example (TAU API RECOMMENDED):

 
<script>
   var element = document.getElementById("searchbar"),
       searchBarWidget = tau.widget.SearchBar(element);
   searchBarWidget.disable();
</script>

Code example (jQuery API support for backward compatibility):

 
<script>
   $("#searchbar").searchbar("disable");
</script>
enable

Enables the search bar.

SearchBar enable ( )

The method removes the disabled attribute from the search bar and changes the look of the search bar to the enabled state.

Return value:

Type Description
SearchBar Returns this.

Code example (TAU API RECOMMENDED):

 
<script>
   var element = document.getElementById("searchbar"),
       searchBarWidget = tau.widget.SearchBar(element);
   searchBarWidget.enable();
</script>

Code example (jQuery API support for backward compatibility):

 
<script>
   $("#searchbar").searchbar("enable");
</script>
value

Gets or sets an input text value.

string value ( string? value)

Since: 2.3

If you call the method with a parameter, it is set as the new input text value. Otherwise, the method returns the input text value.

Parameters:

Parameter Type Required/optional Default value Description
value string Optional New input text value.

Return value:

Type Description
string In the get mode, returns the input text value.

Code example (TAU API RECOMMENDED):

 
var searchBarElement = document.getElementById("searchbar"),
    searchBarWidget = tau.widget.SearchBar(searchBarElement),
    value = searchBarWidget.value();

Code example (jQuery API support for backward compatibility):

 
// Value contains the input text
$("#searchbar").searchbar("value");
    
// "New text" is the new input value
$("#searchbar").searchbar("value", "New text");