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.

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.

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

SearchBar disable() 

SearchBar enable() 

string value(string? 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");