Documentation : Search button 001

Getting Started

SearchButton001 - is jQuery plugin that provides fully featured animated search box with autocomplete support. This plugin provides interface to manipulate autocomplete suggestions, listen to many events and customize design (color, width, ...). It’s well documented and easy to integrate in your project.

Required libraries

css style assets/css/searchbutton.css
fonts assets/css/fonts (must be in the same folder as searchbutton.css)
jquery assets/lib/jquery/jquery.js
jquery color animation assets/lib/jquery/jquery-color-animation.js
jquery easing assets/lib/jquery/jquery-easing.js
jquery easing compatibility assets/lib/jquery/jquery-easing-compatibility.js
jellybo search button assets/js/searchbutton.js


Set class jellybo-SearchBar001 to the element

<div class="jellybo-SearchBar001"></div>

or use the jQuery plugin

$(document).ready(function (){


Setting configuration

Passing as data-* attributes

<div class="jellybo-SearchBar001" data-width="500" data-onchange="onSearchBarChange"></div>

or passing object to the jQuery plugin

function onSearchBarChange(){
$(document).ready(function (){
        width: 500,
        placeholder: "Suchen",
        onchange: onSearchBarChange




Height of animation is 40px and cannot be changed!

width width of search bar
color_from color of magnifier icon when input box is collapsed
color_to color of search bar when expanded
list_bg_color color of background of autocomplete list (default: rgba(255,255,255,0.2))
placeholder placeholder of input bod (default: SEARCH)


Listeners can be set the same way as configuration attributes

Parameters passed to listener : event, value

  • event: event passed by jQuery
  • value: value of input box

"this" variable of the function is set to jQuery object of element containing the plugin

onSubmit Is called on magnifier icon click or on enter pressed
onItemSelect Is called when selected item from autocomplete list
onChange Is called when user change the text in input box
parameters: (event, value, user_change)
  • user_change (bool) : true if the value was changed by user , false if the value was changed by selecting from autocomplete list
onItemHighlight Is called when item from autocomplete list is highlighted using arrow buttons
onOpen Is called when the input box is opening
onClose Is called when the input box is closing

Example of listener

$(document).ready(function (){
    function onSearchBarChange(event, value){
        var searchBtn = $(this).jellyboSearchButton001();
        if (value.length >= 3) {
                    "" + value,
                    function (data) {
                        for (var i in data) {
                            if (data[i]) {
        } else {
        onchange: onSearchBarChange



Functions can be called on object returned by jQuery plugin

    var value = $('#searchBtn1').jellyboSearchButton001().getValue();
getValue() return value of input box
setValue(value) set value of input box
emptyList() remove all items from autocomplete list
addListItem(item_text) add item to autocomplete list. parameter is text of item.
setListItems(items_array) set items of autocomplete. parameter is array of items texts.
open() opens the input box
close() closes the input box
clear() clears the input box and removes all autocomplete items