搜索框组件

小咪咪 2022-08-19 11:12 156阅读 0赞

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

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

还需要在js中监听事件

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

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