UNBXD AUTOSUGGEST

This plug-in depends on jQuery and Handlebars libraries. It works with the UNBXD Autosuggest APIs to provide a flexible and configurable auto-suggest for an e-commerce site. It provides features, especially required by e-commerce sites like

1. IN FIELDS

in fields

2. TOP QUERIES

top-queries

3. KEYWORD SUGGESTIONS

keyword-suggestions

4. POPULAR PRODUCTS

popular-products

USAGE

Step 1 - Include scripts

Please include Jquery(> 1.7), Handlebars and unbxdAutosuggest.js in order.
Default css can be applied by including unbxdAutosuggest.css in your html.

Include unbxdAutosuggest.js and unbxdAutosuggest.css after downloading this repo by including this in head of your html page
<link rel="stylesheet" href="//d21gpk1vhmjuf5.cloudfront.net/jquery-unbxdautosuggest.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//d21gpk1vhmjuf5.cloudfront.net/jquery-unbxdautosuggest.js"></script>
PS - please include these script tags before the ending </head> tag in your html page.

Step 2 - Configuration

Configure our autosuggest plugin by modifying below snippet according to your parameters and include that in your html page. Each of the options used is explained in-detail after the following snippet.
// initialize unbxdautocomplete by invoking the unbxdAutoSuggestFunction
// with jquery & handlebars as its parameters. you will need to do this only once.
unbxdAutoSuggestFunction(jQuery, Handlebars);

$(function(){
        //on dom load set autocomplete options
        //Usage: $(<element>).unbxdautocomplete(options);
        $("#input").unbxdautocomplete({
            siteName : 'demosite-u1407617955968' //your site key which can be found on dashboard
            ,APIKey : '64a4a2592a648ac8415e13c561e44991' //your api key which is mailed to during account creation or can be found on account section on the dashboard
            ,minChars : 2
            ,maxSuggestions: 10
            ,delay : 100
            ,loadingClass : 'unbxd-as-loading'
            ,mainWidth : 0
            ,sideWidth : 180
            ,zIndex : 0
            ,position : 'absolute'
            ,template : "1column" 
            ,mainTpl: ['inFields', 'keywordSuggestions', 'topQueries', 'popularProducts']
            ,sideTpl: []
            ,sideContentOn : "right"
            ,showCarts : false
            ,cartType : "separate"
            ,noResultTpl: function(query){
                return 'No results found for '+ query;
            }
            ,onSimpleEnter : function(){
                console.log("Simple enter :: do a form submit")
                //this.input.form.submit();
            }
            ,onItemSelect : function(data,original){
                console.log("onItemSelect",arguments);
            }
            ,onCartClick : function(data,original){
                console.log("addtocart", arguments);
                return true;
            }
            ,inFields:{
                count: 2
                ,fields:{
                    'brand':3
                    ,'category':3
                    ,'color':3
                }
                ,header: ''
                ,tpl: ''
            }
            ,topQueries:{
                count: 2
                ,header: ''
                ,tpl: ''
            }
            ,keywordSuggestions:{
                count: 2
                ,header: ''
                ,tpl: ''
            }
            ,popularProducts:{
                count: 2
                ,price: true
                ,priceFunctionOrKey : "price"
                ,image: true
                ,imageUrlOrFunction: "imageUrl"
                ,currency : "$"
                ,header: ''
                ,tpl: ''
            }
        });
    });

Configuration Options

,inFields:{
    count: 2
    ,fields:{
        'brand':3 //shows 3 values from brand
        ,'category':3 //shows 3 from category
        ,'color':3 //shows 3 from color
    }
    ,header: ''
    ,tpl: ''
},
,topQueries:{
    count: 2
    ,header: ''
    ,tpl: ''
}
,keywordSuggestions:{
    count: 2 
    ,header: ''
    ,tpl: ''
}
,popularProducts:{
    count: 2 //number of products to be shown
    ,price: true //to show price in case of carts
    ,priceFunctionOrKey : "price" //it can also be a function which takes an object as argument and returns a string or number
    ,image: true //to show image
    ,imageUrlOrFunction: "imageUrl" //it can also be a function which takes an object as argument and returns a image url
    ,currency : "$"
    //update title or header value here
    ,header: ''
    //give HBS template here.
    ,tpl: ''
}
//the first argument
{
    value : ""//user selected value
    ,type : ""//IN_FIELD || KEYWORD_SUGGESTION || TOP_SEARCH_QUERIES || POPULAR_PRODUCTS
    ,filtername : ""//available only incase of IN_FIELD
    ,filtervalue : ""//available only incase of IN_FIELD
}
PS - if you want more css changes than given in config file, please override classes in unbxdAutosuggest.css