iHealth-app-demo/html/survey/js/search_template.js

var $searchtResult = $("#search_result"),
    $noResultWrap = $("#no_result_wrap"),
    $searchSuggest = $("#searchValWrap");
var page = 1,
    pagesize = 15,
    hasMore = true,
    searchKey = "";
mui.init();
// 页面业务处理流程开始
new Promise(function(resolve, reject) {
    mui.plusReady(function() {
        resolve(true);
        initKeyboardAndroid();
    });
}).then(function() {
    initScroll();
    bindEvents();
    $('#search-input').focus();
    openSoftKeyboard();
}).catch(function(e) {
    plus.nativeUI.closeWaiting();
    console && console.error(e);
});

function initScroll(){
    //阻尼系数
    var deceleration = mui.os.ios?0.003:0.0009;
    mui('.mui-scroll-wrapper').scroll({
        bounce: false,
        indicators: true, //是否显示滚动条
        deceleration:deceleration
    });
    
    mui('.mui-scroll-wrapper').pullRefresh({
        down: {
            callback: function() {
                setTimeout(function() {
                    searchByPaging(true);
                    mui('.mui-scroll-wrapper').pullRefresh().endPulldownToRefresh();
                }, 1000);
            }
        },
        up:{
            contentrefresh: '正在加载...',
            callback: function(){
                var self = this;
                setTimeout(function() {
                    searchByPaging(false);
                    mui('.mui-scroll-wrapper').pullRefresh().endPullupToRefresh(!hasMore);
                }, 1000);
            }
        }
    });
}

function bindEvents(){
    $('#cancel').on('click', function(){
        mui.back();
    });
    $("#search-input").on('input', function(){
        var html = $(this).val();
        var reg = new RegExp("<"+"(?!>)","gi");
        html = html.replace(reg,'&lt'); 
        var reg = new RegExp(">"+"(?!>)","gi");
        html = html.replace(reg,'&gt'); 
        $('#searchVal').html(html);
        $(".searchbar-clear").toggle($(this).val() != "");
        $searchSuggest.toggle($(this).val()!="");
        $searchtResult.hide();
        $noResultWrap.hide();
    }).on('keyup',function(e) {
        if (e.which === 13) {
            $searchSuggest.hide();
            searchByPaging(true);
        }
    });
    
    $(".searchbar-clear").on('click', function(){
        $(this).hide();
        $("#search-input").val("");
        $('#searchVal').html("");
        $searchSuggest.hide();
    });
    
    $("form").on('submit', function(){
        searchByPaging(true);
        return false;
    });
    
    $searchSuggest.on('click',function() {
        $searchSuggest.hide();
        searchByPaging(true);
    });
    
    $("#result_list").on('tap', "li",function(){
        var $this = $(this),
            code = $this.attr("data-code"),
            info = $this.attr("data-json");
        openWebview("template_info.html", {template_id: code, info: JSON.parse(info)});
        
    });
}


function searchByPaging(isInit){
    page = isInit ? 1 : page;
    searchKey = $("#search-input").val();
    var url = "/doctor/questionnaire/getTemplateByLabelOrTitle",
        params = {name: searchKey, pageNo: page, pageSize: pagesize};
    sendGet(url, params, null, function(res){
        if(res.status == 200){
            page ++;
            if(isInit && res.data.length == 0){
                $("#no_result_wrap").show();
                $(".mui-scroll-wrapper").hide();
            }else{
                $("#no_result_wrap").hide();
                $(".mui-scroll-wrapper").show();
                if(res.data.length < pagesize){
                    hasMore = false;
                    isInit && mui(".mui-scroll-wrapper").pullRefresh().endPullupToRefresh(!hasMore);
                }else{
                    hasMore = true;
                }
                
                var list = _.map(res.data, function(o){
                    var label_text = "";
                    o.jsonStr = JSON.stringify(o);
                    for(i=0; i<o.label.length; i++){
                        var ml = (i>0)? 'ml10' : "";
                        label_text += '<span class="c-f14 flag c-333 '+ml+'">'+o.label[i]+'</span>';
                    }
                    o.label_text = label_text;
                    return o;
                });
                var html = template("result_tmp", {list: res.data});
                
                if(isInit){
                    $("#result_list").empty().append(html);
                }else{
                    $("#result_list").append(html);
                }
                ellipsisText($("#result_list").find('li'),searchKey);
            }
        }
    }, true);
}

function getRowProps($el) {
    var $textEllipsis = $el,
        $text = $textEllipsis.eq(0),
        $chart = $text.text('a'),
        enWidth = $chart.width(),
        $chart = $text.text('中'),
        zhWidth = $chart.width(),
        lineHeight = parseFloat($chart.css("lineHeight"), 10),
        rowHeight = $chart.height();
    $chart.text('');
    return {
        chartWidth: {
            zh: zhWidth,
            en: enWidth
        },
        rowHeight: Math.max(rowHeight, lineHeight),
        rowWidth: $el.width()
    };
}
function replaceAll(text, arr) {
    var html = text;
    _.each(arr,function(kw) {
        var reg = new RegExp(kw+"(?!>)","gi");
        html = html.replace(reg,'<em>'+kw+'</em>');
    });
    return html;
}
function highlineKeyword($el,searchText) {
    var props = getRowProps($el),
        chartWidth = props.chartWidth,
        rowHeight = props.rowHeight,
        rowWidth = props.rowWidth,
        // 每行显示字符数（以中文字符为标准计算）
        chartNum = Math.floor(rowWidth / chartWidth.zh),
        // 排除指定数量字符所占宽度
        exceptNum = 0,
        // 行数
        rowNum = 1,
        // 预计显示总字符数
        expectedNum = chartNum * rowNum - exceptNum,
        $target = $el,
        // 目标文本
        text = $.trim($target.attr('data-text')),
        length = text.length,
        // 关键字数组
        kws = $.trim(searchText).replace(/\s+/g," ").split(" ");

    var fidx = 0,preFidx,diff = 0;
    $target.html(replaceAll(text, kws));
    if(Math.floor($target.height() / rowHeight) <= rowNum) {
        return ;
    }
    if(text.length > expectedNum) {
        fidx = text.indexOf(kws[0])+kws[0].length-1;
        diff = fidx - expectedNum + 1;
        preFidx =  fidx;
        diff = (diff<0)?0:diff;
        var preChar = (diff>0)?"...":"";
        $target.html(preChar+replaceAll(text.slice(diff,preFidx+1), kws)+"...");
        while((Math.floor($target.height() / rowHeight) <= rowNum) && (preFidx < length)) {
            preFidx++;
            $target.html(preChar+replaceAll(text.slice(diff,preFidx+1), kws)+"...");
        }
        if(preFidx == length && (Math.floor($target.height() / rowHeight) <= rowNum)) {
            diff = diff>0?(diff - 1):0;
            $target.html(preChar+replaceAll(text.slice(diff,preFidx), kws));
        } else if((Math.floor($target.height() / rowHeight) > rowNum)) {
            $target.html(preChar+replaceAll(text.slice(diff,preFidx), kws)+"...");
        }
    }
}
function ellipsisText($elements, searchText) {
    //$el.ellipsis({ row: 2});
    _.each($elements,function(el) {
        var $textEl = $(el).find(".j-text-ellipsis");
        _.each($textEl, function(t){
            highlineKeyword($(t),searchText);
        });
    });
}