搜索框组件

最近封装了一个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);
})

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