sr-iHealthwx/html/rlcx/js/search-bar.js

;$(function () {
    var $searchInput = $('#searchInput'),
        $searchCancel = $('#searchCancel'),
        $categoryIndex = $('#categoryIndex'),
        $searchResultList = $('#searchResultList'),
        $searchResult = $('#searchResult'),
        $maskCont = $('.js-mask-cont'),
        data = {},
        timer = null;

    // 初始化数据加载
    function dataInit() {
        sendPost("common/health/food/list?pid=0",data, "json", "post", operateFailed, operateSuccesss);
        function operateSuccesss(res) {
            var categoryData = res,
                dataStr = JSON.stringify(res.list);

            localStorage.setItem("categoryList", dataStr);
            html = template('categoryList', categoryData);
            $categoryIndex.html(html);

        };
        function operateFailed(res) {
        };
    }
    dataInit();

    // 视图逻辑层处理
    var viewLogic = {
        showFoodDeital:function () {
            $searchResult.show();
            $categoryIndex.hide();
            $maskCont.hide();
        },
        hideFoodDetial:function () {
            $searchResult.hide();
            $categoryIndex.show();
            $maskCont.hide();
        }
    }

    var timer = null;
	$searchInput.on('input',controlCancelBtn)
    function controlCancelBtn() {
        clearTimeout(timer);
        var val = $(this).val();

        // 查询
        function searchAjaxFn(){
            var postData = {},
	            singleData = null;
	            resData = null;

            timer = setTimeout(function () {
                postData.name = val;
                sendPost("common/health/food/search", postData, "json", "post", operateFailed, operateSuccesss);},700)

            function operateSuccesss(res) {
	            resData = res.list;
	            var length = resData.length,
		            delNum;

                $maskCont.show();

                // 排除大类别
                console.log(resData);
	            for (var i = 0; i < length; i++) {
                    if (resData[i].pid == 0) {
                        delNum = i;
                    }
	            }
                if (typeof  delNum !== 'undefined') {
	                resData.splice(delNum,1)
                }

                if (resData.length > 0) {

	                var html = template('ResultTemplate', res);

                    $searchResultList.html(html);

                    $searchResultList.on('click','.searchbar-result-item',function () {

	                    var id = $(this).data('id'),
                            length = resData.length;

                        for (var i = 0; i < length; i++) {
                              if (resData[i].id === id) {
                                  singleData = resData[i];
                              }
                        }

                        if (typeof singleData.component === 'string') {
	                        singleData.component = JSON.parse(singleData.component);
                        }

	                    html = template('singleResult', singleData);
                        $searchResult.html(html)
                        $searchInput.val(singleData.name);
                        viewLogic.showFoodDeital();

                    })
                }else {
                    var
                        data = {
                            list: [{name:'查无结果'}],
                        },
                        html = template('ResultTemplate', data);
                        $searchResultList.html(html);
                }

            }
            function operateFailed(res) {

            }
        }

        if (val !== '') {
            $searchCancel.show();
            searchAjaxFn();
        } else {
            $searchCancel.hide();
            $maskCont.hide();
            viewLogic.hideFoodDetial();
        }
    }




    $searchCancel.click(hideCancelBtn)
    function hideCancelBtn() {
        $searchInput.val('');
        $(this).hide();
        $maskCont.hide();

        viewLogic.hideFoodDetial();
    }





})