输入提示

最新推荐文章于 2022-10-06 19:54:33 发布

最新推荐文章于 2022-10-06 19:54:33 发布 · 159 阅读

文章标签：

一直想找一个现成的简单又好用的 js 做文本的输入提示，找来找去都不顺心，索性自己封装了一个简单的js,用的时侯构造一个json对象,然后new Suggest对象就可以了。
如：


var data= [{"text":"pek-北京","value":"北京"},
	{"text":"sha-上海","value":"上海"},
	{"text":"lon-伦敦","value":"伦敦"}];
new Suggest("city",data,"北京")；


/**
 *
 * @param {Object} objId 生成文本框(input) 的 id 和 name
 * @param {Object} data 原始数据，json 对象，两个属性 text 和 value,value是要放到输入框中的值，text是提示框中显示的值
 * @param {Object} defaultValue 默认值
 */
function Suggest(objId, data, defaultValue){
    //输入框
    var obj;

    //提示框
    var div;

    // div中的table(提示的内容都在此table中)
    var table;

    //eval成json对象
    var orgData = eval(data);

    var page;

    /**
     * public 属性
     */ 
    this.hasErr = false;

    var rowIndex = -1;

	/**
	 * 初始化
	 */
    var init = function(){
        document.write('<input width="85px" type="text" name="' + objId + '" id="' + objId + '"  value="' + defaultValue + '" />');
        obj = $(objId);

        document.write('<div id="suggest' + objId + '" name="suggest' + objId + '" align="left" style="position:absolute;width:190px;background-color:#fff;border:2px solid #9EB8C3;height:202px;overflow:auto;display:none;z-index: 9999;" onfocus="true"></div>');
        div = $("suggest" + objId);

		// 重写输入框的 onkeyup事件
        obj.onkeyup = function(evt){
            evt = evt || window.event;
            var keyCode = window.event ? evt.keyCode : evt.which;

            switch (keyCode) {
                case 40:
                    down();
                    break;
                case 38:
                    up();
                    break;
                case 39:
                    nextPage();
                    break;
                case 37:
                    prePage();
                    break;
                default:
                    suggest();
            }
        };

		// 重写提示框的 onblur
        div.onblur = function(){
            if (document.activeElement.id != obj.id) {
                hide();
            }
        };

		// 重写输入框的 onblur
        obj.onblur = function(){
            if (document.activeElement.id != div.id && document.activeElement.id.indexOf("suggest") != 0) {
                hide();
            }
        };
    }

    init();

	/**
	 * 构造提示信息 并显示
	 */
    var suggest = function(){
        buildData();

        // 如果没有提示的数据 暂时认为用户输入有误 hasErr 置为 true
        if (!page.data || page.data.length == 0) {
            resetRowIndex();
            this.hasErr = true;
        } else {
            this.hasErr = false;
        }

        position(obj, div);

        buildTable();

        show();
    };

    /**
     * 在输入框中输入内容后，从orgData中选择合适的值显示在提示框中
     */
    var buildData = function(){
        var input = obj.value.toUpperCase();

        page = new Page();

        if (input.trim() == "") {
			hide();
            return ;
        }
        var temp = new Array();
        var j = 0;
        for (var i = 0; i < orgData.length; i++) {
            if (orgData[i].text.indexOf(input) >= 0) {
                temp.push(orgData[i]);
                j++;
            }
            if (j == 10 || (temp.length > 0 && i == orgData.length - 1)) {
                page.push(temp);
                temp = new Array();
                j = 0;
            }
        }
    };

    /**
     * 构造提示框html
     */
    var buildTable = function(){
        var s = '<table id="suggestTable' + obj.id + '" width="100%" height="18" class="tbl_box">';

        if (hasErr) {
            s += '<tr bgColor=red><td>没有相关内容，请重新输入！</td></tr></table>';
            return s;
        }
        for (var i = 0; i < page.data.length; i++) {
            s += '<tr onmouseover="bgColor=' + "'#9EB8C3'" + ';this.style.cursor=' + "'hand'" + '" onmouseout="bgColor=' + "'#ffffff'" + '">';
            s += '<td id=\"suggestTd' + i + '\" onclick=\'javascript:choose(\"' + obj.id + '\",\"' + div.id + '\",\"' + page.data[i].value + '\");\'>';
            s += page.data[i].text;
            s += '</td></tr>';
        }
        s += '</table>';
        s += '<span class="friendTip">' + page.pageInfo() + '</span>';
        s += '<iframe style="position:absolute; visibility:inherit; top:0px;left:0px;width:1px; height:100px; z-index:5;filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);"></iframe>';

        div.innerHTML = s;
        table = $("suggestTable" + obj.id);
    };

	/**
	 * 提示框处于隐藏状态 ? true : false
	 */
    var alreadyHide = function(){
        return div.style.display == "none";
    };

	/**
	 * 显示提示框
	 */
    var show = function(){
        div.style.display = "";
    };

    /**
     * 把当前行设为初始值 -1
     */
    var resetRowIndex = function(){
        rowIndex = -1;
    };

	/**
	 * 隐藏提示框
	 */
    var hide = function(){
        resetRowIndex();
        div.style.display = "none";
    };

	/**
	 * 下箭头
	 */
    var down = function(){
        if (alreadyHide()) {
            return suggest();
        }

        var currentRow = table.rows[rowIndex];
        var nextRow = table.rows[++rowIndex];
        if (nextRow) {
            if (currentRow) {
                currentRow.style.background = "";
            }
            nextRow.style.background = "#9EB8C3";
            obj.value = page.data[rowIndex].value;
        } else if (page.hasNext()) {
            // 如果有下一页
            nextPage();
        } else if (currentRow) {
            firstPage();
        }
    };

	/**
	 * 上箭头
	 */
    var up = function(){
        if (alreadyHide()) {
            return suggest();
        }
        if (rowIndex == -1) {
            rowIndex = table.rows.length;
        }
        var currentRow = table.rows[rowIndex];
        var nextRow = table.rows[--rowIndex];
        if (nextRow) {
            if (currentRow) {
                currentRow.style.background = "";
            }
            nextRow.style.background = "#9EB8C3";
            obj.value = page.data[rowIndex].value;
        } else if (page.hasPre()) {
            // 如果有上一页
            prePage();
        } else if (currentRow) {
            lastPage();
        }
    };

	/**
	 * 下一页
	 */
    var nextPage = function(){
        if (alreadyHide()) {
            return suggest();
        }
        if (page.hasNext()) {
            page.next();
            resetRowIndex();
            buildTable();
        } else {
            firstPage();
        }
    };

	/**
	 * 前一页
	 */
    var prePage = function(){
        if (alreadyHide()) {
            return suggest();
        }
        if (page.hasPre()) {
            page.pre();
            resetRowIndex();
            buildTable();
        } else {
            lastPage();
        }
    };

	/**
	 * 第一页
	 */
    var firstPage = function(){
        page.first();
        resetRowIndex();
        buildTable();
    };

	/**
	 * 最后页
	 */
    var lastPage = function(){
        page.last();
        resetRowIndex();
        buildTable();
    };


    /**
     * 分页类
     */
    function Page(){
        // 所有页的数据
        var list = new Array();

        var c_index = 0;

        this.pageCount = 0;

        //当前页数据
        this.data;

        this.push = function(onePage){
            if (this.pageCount == 0) {
                this.data = onePage;
            }
            list.push(onePage);
            this.pageCount++;
        };
        this.get = function(i){
            return list[i];
        };
        this.pre = function(){
            if (c_index > 0) {
                this.data = list[--c_index];
            }
        };
        this.next = function(){
            if (c_index < list.length - 1) {
                this.data = list[++c_index];
            }
        };

        this.hasNext = function(){
            return c_index < list.length - 1;
        };

        this.hasPre = function(){
            return c_index > 0;
        };

        this.first = function(){
            if (list.length > 0) {
                c_index = 0;
                this.data = list[c_index];
            }
        };
        this.last = function(){
            if (list.length > 0) {
                c_index = list.length - 1;
                this.data = list[c_index];
            }
        };
        // 当前页数 从 1 开始
        this.pageInfo = function(){
            return c_index + 1 + "/" + this.pageCount;
        };
    }

    /**
     * 定位提示框
     * @param {Object} obj 输入框
     * @param {Object} div 提示框
     */
    function position(obj, div){
        var top = obj.offsetTop;
        var height = obj.clientHeight;
        var left = obj.offsetLeft;
        while (obj = obj.offsetParent) {
            top += obj.offsetTop;
            left += obj.offsetLeft;
        }
        div.style.top = (top + height + 6) + 'px';
        div.style.left = left + 'px';
        div.style.display = "block";
    }
}


/**
 * 通过鼠标选择提示框中的内容
 * @param {Object} objId
 * @param {Object} divId
 * @param {Object} value
 */
function choose(objId, divId, value){
    $(objId).value = value;
    $(divId).style.display = "none";
}