Documentation : Search button 003

Getting Started

SearchButton003 - 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, height, ...). It’s well documented and easy to integrate in your project.

Required libraries

css style assets/css/searchbutton.css
jquery assets/lib/jquery/jquery.js
snap svg assets/lib/snap/snap.svg-min.js
jellybo search button assets/js/searchbutton.js

Initialization

Set class jellybo-SearchBar003 to the element

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

or use the jQuery plugin

<script>
$(document).ready(function (){
    $('#searchBtn1').jellyboSearchButton003();

})
</script>

Setting configuration

Passing as data-* attributes

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

or passing object to the jQuery plugin

<script>
function onSearchBarChange(){
    ...
}
$(document).ready(function (){
    $('#searchBtn1').jellyboSearchButton003({
        width: 500,
        placeholder: "Suchen",
        onchange: onSearchBarChange
    });

})
</script>

Configuration

Attributes

width width of search bar
height height of search bar
color_1 color of border
color_2 color of text and magnifier icon
list_bg_color color of background of autocomplete list (default: rgba(255,255,255,0.2))
line_stroke stroke width of border
magnifier_stroke stroke width of magnifier icon
placeholder placeholder of input bod (default: SEARCH)

Listeners

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

<script>
$(document).ready(function (){
    function onSearchBarChange(event, value){
        var searchBtn = $(this).jellyboSearchButton003();
        if (value.length >= 3) {
            jQuery.getJSON(
                    "http://gd.geobytes.com/AutoCompleteCity?callback=?&limit=5&q=" + value,
                    function (data) {
                        searchBtn.emptyList();
                        for (var i in data) {
                            if (data[i]) {
                                searchBtn.addListItem(data[i]);
                            }
                        }
                    }
            );
        } else {
            searchBtn.emptyList();
        }
    }
    $('#searchBtn1').jellyboSearchButton003({
        onchange: onSearchBarChange
    });

})
</script>

Functions

Functions can be called on object returned by jQuery plugin

    var value = $('#searchBtn1').jellyboSearchButton003().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