ziqim/zhiqim_ui/document/tutorial/uim/form/autoInput.htm

<#def title = "输入框样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。"/>
<#def prevUrl = "../js/query.htm"/>
<#def nextUrl = "button.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
<script>
function doChange(tabnav)
{
    doUpdateCode(Z(tabnav));
}

function doUpdateCode($this)
{//更新代码
    var html = $this.find("section > div").htmlt();
    //去除多余的cover代码
    html = Z.S.replaceAll(html, /&lt;span\sclass="z-cover((?!&gt;).)+&gt;/g, '');
    html = Z.S.replaceAll(html, /&lt;div\sclass="z-absolute((?!&gt;).)+&gt;.+span&gt;/g, '');
    $this.find("section > div").next("div > span").html(html);
}
</script>
${zhiqim_com_head_end()}

${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}

<!--容器开始 -->
<div id="container" class="container">

${zhiqim_com_container_ui("ZmUI", "form", "input")}

<!--主体-->
<div id="mainbody" class="mainbody">

${zhiqim_com_breadcrumb("UI", "ZmUI", "表单", "输入框")}

<!-- content开始 -->
<div id="mobileUI_content" class="content">

<!-- 左侧详情 -->
<div class="mobileUI-left">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
    <p class="z-text-blue">自动提示关键字：</p>
    <p class="z-color-333" style="text-indent:38px;">
        输入内容，匹配数据库显示可选项；支持键盘“上”、“下”键选择，鼠标、“回车”选中
    </p>
</div>

<#-- 一、自动提示关键字 -->
<div class="tutorial title">一、纯文本框，不显示历史记录、显示高度为5条选框高度</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="min-height:200px;"><script>
    Z.onload(function()
    {
        var searchAutoList = new Z.SearchAutoList({
            id: "auto_input",                                           //输入框 id
            ajaxClassName: "com.zhiqim.zhiqim.ui.SearchInputAjaxList",  //ajax调用的类名
            ajaxMethodName: "getKeywordsList",                          //ajax调用的方法名
            history: 0,             //可选项；是否显示历史记录，默认为 “1” 显示
            listMax: 5,             //可选项；结果列表的显示高度，默认为 “10”
            splitType: ";",         //可选项；返回值中的分隔符，默认为 “;”
            callback: null          //可选项；选中后的回调函数，默认为 null，this 为定义的 Z.SearchAutoList 对象
        });
    });
</script>
<input id="auto_input" class="z-input z-large z-w300" type="text">
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、前三个参数为必填项，缺一不可<br>
    2、Ajax的回调结果为字符串型，字符的分隔符号由类方法决定<br>
    3、splitType 为可选项，默认值为 “;”，字符的分隔符号不为 “;” 时需要定义<br>
</div>
</section>
<div class="tutorial title">二、带按钮的搜索框，显示历史记录，显示高度为10条选项高度</div>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="min-height:200px;"><script>
    Z.onload(function()
    {
        var searchAutoList2 = new Z.SearchAutoList({
            id: "auto_wrap",                                            //盒子 id
            ajaxClassName: "com.zhiqim.zhiqim.ui.SearchInputAjaxList",  //ajax调用的类名
            ajaxMethodName: "getKeywordsList",  //ajax调用的方法名
            callback: function(){               //可选项；选中后的回调函数，默认为 null，this 为定义的 Z.SearchAutoList 对象
                alert("输入结果： " + this.value);
            }
        });
    });
</script>
<span id="auto_wrap" class="z-show-ib">
    <input id="auto_input2" class="z-input z-large z-w300" type="text"><button class="z-button z-mg-l-1" style="height:34px" type="submit">搜索</button>
</span>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、前三个参数为必填项，缺一不可<br>
    2、Ajax的回调结果为字符串型，字符的分隔符号由类方法决定<br>
    3、splitType 为可选项，默认值为 “;”，字符的分隔符号不为 “;” 时需要定义<br>
    4、callback 为可选项，表示选中后需要做的操作，默认值为 “null”，this 为定义的 Z.SearchAutoList 本身<br>
    5、callback 函数中可用到的值：this.value 为输入框内容，this.responseText 为返回的搜索结果字符串 
</div>
</section>
</div>

<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
    <a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
    <div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
    <a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
    <div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}

<!-- content结束 -->
</div>

${zhiqim_com_chapter()}
<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>

${zhiqim_com_footer()}

<script>
+(function(F)
{
    Z.SearchAutoList = Z.Class.newInstance();
    Z.SearchAutoList.prototype = 
    {
        defaults:
        {
            id: null,              //输入框/输入框盒子ID
            ajaxClassName: null,   //Ajax调用的类名
            ajaxMethodName: null,  //Ajax调用的类方法
            history: 1,            //历史记录显示
            listMax: 10,           //结果列表显示高度
            splitType: ";",        //类方法返回的字符串结果中的分隔符
            callback: null         //选中后的回调函数
        },
        
        init: function()
        {//构造函数
            if (!this.id || !Z.D.has(this.id)){
                Z.alert("指定[id]出错");
            }
            this.responseText = "";
            this.$wrap = Z("#"+this.id);
            this.$input = this.$wrap;
            if (this.$wrap[0].tagName.toUpperCase() != "INPUT")
                this.$input = this.$wrap.find("input[type=text]");
            
            var width = this.$wrap.offsetWidth();
            var height = this.$wrap.offsetHeight();
            var fontSize = this.$input.css("fontSize");
            this.pdLeft = this.$input.css("padding-left");
            this.pdRight = this.$input.css("padding-right");
            this.lHeight = this.$input.css("line-height");
            this.mHeight = this.listMax * parseInt(this.lHeight) + "px";
            
            this.$cover = Z.$cover(this.$wrap).css({display:"inline-block",position:"relative",width:width,height:height,fontSize:fontSize});
            this.$list = Z('<div class="z-absolute z-w100p z-mg-t-1 z-bg-white z-text-left z-bd z-hide" style="left:0;top:100%;font-size:inherit;z-index:99;"></div>')
                        .appendTo(this.$cover);
            
            //事件绑定
            this.$input.on("focus",this.focus,this);
            this.$input.on("input",this.input,this);
            this.$input.keydown(this.doKeyDown,this);
            Z(document).click(this.docClick,this);
        },
        
        execute: function()
        {//执行为空即可，统一在初始化中处理
        },
        
        //获取焦点事件
        focus: function(e)
        {
            this.value = this.$input.val();
            if (this.value == "")
                return this.doHistoryList();
            if (this.$list.find('li').length == 0)
                return;
            this.$list.show();
            if (this.beforeValue != this.value)
            {//无修改时，获取焦点，不调用Ajax
                this.doAjax();
                this.beforeValue = this.value;
            }
        },
        
        //input事件
        input: function(e)
        {
            this.value = this.$input.val();
            if (Z.V.isEmptyBlank(this.value))
                return this.doHistoryList();
            this.$list.show();
            this.doAjax();
        },
        
        doAjax: function(e)
        {
            this.ajax = new Z.Ajax();
            this.ajax.OBJ = this;
            this.ajax.setClassName(this.ajaxClassName);
            this.ajax.setMethodName(this.ajaxMethodName);
            this.ajax.addParam(this.value);
            this.ajax.setCallback(function(){
                this.OBJ.doFilter.call(this.OBJ,this.responseText);
            });
            this.ajax.execute();
        },
        
        //筛选对象，生成列表
        doFilter: function(e)
        {
            var responseText = e;
            this.$list.html("");
            var keyWordsArr = responseText.split(this.splitType);
            var htmlStr = '<ul class="z-overflow-auto" style="max-height:' + this.mHeight + '">';
            for (var i = 0;i < keyWordsArr.length;i++)
            {
                if (keyWordsArr[i].indexOf(this.value) > -1)
                    htmlStr += '<li style="padding: 0 ' + this.pdRight + ' 0 ' + this.pdLeft +'; line-height:'+ this.lHeight +'; cursor: default;">'
                            + keyWordsArr[i] + "</li>";
            }
            htmlStr += "</ul>";
            Z(htmlStr).appendTo(this.$list);
            if (Z(htmlStr).html() == "")
                return this.$list.hide();
                
            //绑定事件
            this.liSet = this.$list.find("li");
            this.liSet.click(this.doSelect,this);
            this.liSet.mouseenter(this.liMouseEnter,this);
            this.liSet.mouseleave(this.liMouseLeave,this);
        },
        
        //鼠标选中
        doSelect: function(e)
        {
            Z.E.forbidden(e);
            var liVal = Z(Z.E.target(e)).html();
            this.beforeValue = this.value;
            this.value = liVal;
            this.$input.val(liVal);
            this.$list.hide();
            this.doAjax();
            //历史记录存储
            this.saveHistory(e);
            //选中后的回调
            this.doCallback(e);
        },
        
        //空白处点击，隐藏列表
        docClick: function(e)
        {
            var target = Z.E.target(e);
            if (target == this.$input[0])
                return;
            this.$list.hide();
            if (Z.V.isEmptyBlank(this.value))
                return;
            if (this.beforeValue != this.value)
            {//解决多次调用Ajax的问题
                this.doAjax();
                this.beforeValue = this.value;
                //历史记录存储
                this.saveHistory(e);
            }
        },
        
        //键盘 “上” “下” “回车”按键监听
        doKeyDown: function(e)
        {
            var keyVal = Z.E.key(e);
            if (keyVal ==  38 || keyVal == 40 || keyVal == 13)
            {//上：38，下：40，回车：13
                Z.E.forbidden(e);
                if (this.liSet)
                {//有选择列表的搜索框
                    var liSetLength = this.liSet.length;
                    var liActive = this.$list.find(".z-bg-gray");
                    var liActiveIndex = -1;
                    var toIndex = null;
                    if (liActive.length != 0)
                        liActiveIndex = Z.EL.parentIndex(liActive[0]);
                    switch (keyVal)
                    {
                        case 38://上
                            toIndex = liActiveIndex - 1;
                            if (toIndex <= -1)
                                toIndex = liSetLength - 1;
                            break;
                        case 40://下
                            toIndex = liActiveIndex + 1;
                            if (toIndex == liSetLength)
                                toIndex = 0;
                            break;
                        case 13://回车选中
                            this.$input[0].blur();
                            this.$list.hide();
                            this.value = this.$input.val();
                            this.doAjax();
                            //历史记录存储
                            this.saveHistory(e);
                            //选中后的回调
                            this.doCallback(e);
                            return;
                    }
                    toIndex++;
                    this.liSet.removeClass("z-bg-gray");
                    var toLi = this.$list.find("li:nth-child(" + toIndex +")").addClass("z-bg-gray");
                    this.value = toLi.html();
                    this.$input.val(toLi.html());
                }
                else if (keyVal == 13)
                {//直接在输入框回车搜索
                    this.value = this.$input.val();
                    this.doAjax();
                    //历史记录存储
                    this.saveHistory(e);
                    //选中后的回调
                    this.doCallback(e);
                }
            }
        },
        
        //选中后的回掉函数
        doCallback: function(e)
        {
            if(!this.callback)
                return;
            this.callback(e);
        },
        
        //历史记录列表展示
        doHistoryList: function(e)
        {
            if (!this.history) return;
            this.$list.html("").hide();
            if (localStorage.getItem(this.id))
            {
                var htmlStr = '<ul class="z-text-gray">';
                var hisArr = localStorage.getItem(this.id).split(";");
                for (var i = 0;i < hisArr.length;i++)
                {
                    htmlStr += '<li style="padding:0 ' + this.pdRight + ' 0 ' + this.pdLeft +';line-height:'+ this.lHeight +';cursor:default;">'
                            + hisArr[i] + "</li>";
                }
                htmlStr += "</ul>";
                Z(htmlStr).appendTo(this.$list.show());
                var hisBar = '<div class="z-bg-blue z-clearfix" style="padding:0 ' + this.pdRight + ' 0 ' + this.pdLeft +';line-height:'+ this.lHeight +';cursor:default;">'
                        + '<span class="z-float-right z-pointer z-deleteBtn">清空历史</span>'
                        + '</div>';
                Z(hisBar).appendTo(this.$list.show());
                //绑定事件
                this.liSet = this.$list.find("li");
                this.liSet.click(this.doSelect,this);
                this.liSet.mouseenter(this.liMouseEnter,this);
                this.liSet.mouseleave(this.liMouseLeave,this);
                //绑定删除事件
                var $delBtn = this.$list.find(".z-deleteBtn");
                $delBtn.click(this.emptyHistory,this);
            }
        },
        
        emptyHistory: function(e)
        {
            localStorage.removeItem(this.id);
        },
        
        //输入完成，存储历史记录
        saveHistory: function(e)
        {
            if (!this.history) return;
            if (!localStorage.getItem(this.id))
                localStorage.setItem(this.id,"");
            var hisStr = localStorage.getItem(this.id);
            if (hisStr == "")
                return localStorage.setItem(this.id,this.value);
            //去重
            var hisArr = hisStr.split(";");
            hisArr.unshift(this.value);
            var hisObj = {};
            var resultArr = [];
            for(var i = 0; i < hisArr.length; i++)
            {
                if(!hisObj[hisArr[i]])
                {
                    resultArr.push(hisArr[i]);
                    hisObj[hisArr[i]] = 1;
                }
            }
            //限制个数
            if (resultArr.length > 10)
                resultArr.length = 10;
            hisStr = resultArr.join(";");
            localStorage.setItem(this.id,hisStr);
        },
        
        //鼠标悬浮，背景颜色变化
        liMouseEnter: function(e)
        {
            var $thisLi = Z(Z.E.target(e));
            $thisLi.addClass("z-bg-gray");
        },
        
        liMouseLeave: function(e)
        {
            var $thisLi = Z(Z.E.target(e));
            $thisLi.removeClass("z-bg-gray");
        },
    }
}
)(zhiqim)
</script>