Smart Search-A Responsive Design

This resource is useful for all web-applications where there will be a search option, this is very cool, we can add new items into it dynamically. if you type any alphabets in search box,automatically it shows the matching words in the list.

It is developed by basic HTML5 tags and CSS3 media queries for responsive design.

The JQuery Mobile uses HTML5 data attributes to allow markup-based initialization and configuration of widgets.These attributes are completely optional. Some of the attributes are Button,Checkbox,Collapsible,collapsible set,Content,Control group,dialog,Page,footer etc..

Here we used data-role="header",data-role="page",data-role="fieldcontain",,data-role="footer"

Lets us know about these data roles attributes.

data-role="Header"

data-id string (Unique ID):Required for persistent headers
data-position:fixed
data-fullscreen (true | false): Used in conjunction with fixed toolbars
data-theme :swatch letter (a-z)

data-role="Page"
data-add-back-btn :true | false - Auto add back button, header only
data-back-btn-text :string
data-back-btn-theme :swatch letter (a-z)
data-close-btn-text :string - Text for the close button, dialog only
data-dom-cache :true | false
data-fullscreen :true | false - Used in conjunction with fixed toolbars


data-overlay-theme :swatch letter (a-z) - Overlay theme when the page is opened in a dialog.
data-theme :swatch letter (a-z) - Default "c"
data-title :string - Title used when page is shown
data-url :url - Value for updating the URL, instead of the url used to request the page

data-role="fieldcontainer"
Container with data-role="fieldcontain" wrapped around label/form element pair

data-role="footer"
data-id string(Unique ID) : Required for persistent footers
data-position :fixed
data-fullscreen(true | false): - Used in conjunction with fixed toolbars
data-theme :swatch letter (a-z)



Responsive SmartSearch:





You can add dynamically to the list of items by add button.