搜索框组件

最近封装了一个search bar的组件，主要用到了Qweb的template在相关组件中来引入，相关的代码如下：

search_bar_template.xml :

<openerp>
    <data>
        <template id="search_bar_assets">
            <link rel="stylesheet" href="/website_sale/static/src/search_bar/search_bar_template.css"/>
            <script type="text/javascript" src="/website_sale/static/src/search_bar/search_bar_template.js"></script>
        </template>
        <template id="search_bar_template">
            <t t-call-assets="website_sale.search_bar_assets" t-js="true" t-css="true"></t>
            <div id="search-bar" >
                <div class="image1">
                    <a>
                        <img class="logo" src="/website_sale/static/src/search_bar/logo.png"/>
                    </a>
                </div>
                <div id="searchTab" class="searchTab">
                    <div class="searchType searchFirst" id="searchBarFirst">
                        大数据选货
                    </div>
                    <div class="searchType searchItem" id="searchBarSecond">
                        卖家特供
                    </div>
                </div>
                <div class="search1">
                    <div class="input-group">
                        <input placeholder="请输入您要搜索的关键词" type="text"
                               class="form-control epic_newBrand_brandSearch_input typeahead" id="newBrandSearchInput"/>
                        <span class="input-group-btn">
                            <button class="btn btn-default btn-search" type="button">
                                <span>搜索</span>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="wx_code">
                    <a>
                        <img border="0" src="/website_sale/static/src/search_bar/code.jpg"/>
                    </a>
                </div>
                <div class="hot_words hot-words-wp">
                    <div class="hot_words_label">当前热搜:</div>
                </div>
            </div>
        </template>
    </data>
</openerp>

search_bar_template.js

$(document).ready(function() {
    var url = window.location.href;
    var jsonp = {
            jsonrpc: "2.0",
            method: "call",
            params: {},
            id: undefined
        };
    $.ajax({
        type: 'post',
        url: '/shop/item/keyword',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(jsonp),
        success: function(data) {
            data = data.result;
            $(data).each(function(index,item) {
                $('.hot-words-wp').append('<div class="hot_word"><a href="javascript:;" class="keyword_btn">'+ item[0] +'</a></div>')
            })
        },
        error: function (data) {
            alert('更新失败，请稍后再试！')
        }
    })


    if(url.indexOf("/shop")!== -1) {
        $('#searchBarFirst').removeClass("searchItem").addClass("searchFirst");
        $('#searchBarSecond').removeClass("searchFirst").addClass("searchItem");
    }
    if(url.indexOf("/ourShop/selling") !== -1) {
        $('#searchBarSecond').removeClass("searchItem").addClass("searchFirst");
        $('#searchBarFirst').removeClass("searchFirst").addClass("searchItem");
    }

    $('.hot-words-wp').on('click', '.keyword_btn', function() {
        var value = $(this).text();
        $('#newBrandSearchInput').val(value);
       <span style="color:#cc0000;"> $(this).trigger('setkeword', value);</span>
    })

    $('.input-group').on('click','.btn-search', function() {
        var val = $('#newBrandSearchInput').val();
        if(val) {
            <span style="color:#cc0000;">$(this).trigger('setkeword',val);</span>
        }
    })
        .on('keyup','#newBrandSearchInput', function(e) {
            if(e.keyCode == 13) {
                var val = $('#newBrandSearchInput').val();

                if(val) {
                    <span style="color:#cc0000;">$(this).trigger('setkeword',val);</span>
                }
            }

        })
    $('#searchTab').on('click','#searchBarFirst', function() {
            if(url.indexOf("/shop") == -1) {
                window.location.href = "/shop";
            }
        })
        .on('click','#searchBarSecond', function() {
            if(url.indexOf("/ourShop/selling") == -1) {
                window.location.href = "/ourShop/selling";
            }
        })

比如一个页面需要引入该组件

<openerp>
    <data>
        <template id="shop_assets">
            <link rel='stylesheet' href='/website_sale/static/src/css/website_sale.css'/>
            <link rel='stylesheet' href='/website_sale/static/src/css/shop/goods_card.css'/>
            <link rel='stylesheet' href='/website_sale/static/src/css/shop/website_filter.css'/>
            <link rel='stylesheet' href='/website_sale/static/src/css/shop/search_bar.css'/>
            <script type="text/javascript" src="/website_sale/static/src/js/shop/goods_card.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/lib/angularjs/angular-sanitize.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/shop/website_sale.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/shop/website_sale_filter.js"></script>
        </template>
        <template id="filters">
            <t t-call-assets="website_sale.shop_assets" t-js="true" t-css="true"></t>
            <!--<t t-call="website_sale.search_bar"/>-->
           <span style="color:#cc0000;"> <t t-call="website_sale.search_bar_template"></t></span>
            <div class="filters">
                <t t-call="website_sale.nav_category_path"/>
                <t t-call="website_sale.nav_subcategory"/>
                <t t-call="website_sale.nav_sort"/>
            </div>
        </template>
    </data>
</openerp>

还需要在js中监听事件

//监听searchBar搜索事件
    $(document).on('setkeword', function(event, keyword) {
        $scope.q = keyword;
        $scope.$apply();
        $scope.sendRequest(1);
    })

大致的流程如下，后面再整理