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, please refer SearchInput component.

Default Selectors
Manual Constructor
HTML Examples
Options
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");

Search Bar

Table of Contents

Default Selectors

Manual Constructor

HTML Examples

Options

Methods

Summary