js文本框提示和自動完成

1.模仿大型網站自動提示，就是輸入“蘋果”，在水果類中搜索，html代碼如下：

<div  id="searchTips" style="display:none;width:291px;height:auto;position:absolute;z-index:9001;">
    <ul></ul>
    <input type="hidden" id="hidSearchOption" />
</div>

js代碼如下：

    //顯示搜索下拉選擇項
    function showTips(searchInput) {
        var top = searchInput.offsetTop+32;
        var left = searchInput.offsetLeft;
        var width = searchInput.offsetWidth;
        var ulStringFormat = "<li onclick='selectOption(this)' onmouseover='javascript:this.style.backgroundColor=\"#A9A9A9\"' onmouseout='javascript:this.style.backgroundColor=\"#666666\"'  style='width:220px;height:25px;background-color: #666666;display:block;'><span style='float:left;text-indent:6px'>" + $("#searchvalue").val() + "</span><span id='{0}' style='float:right;padding-right:1px;fond-size:10px;'>{1}</span></li>";
        while (searchInput = searchInput.offsetParent) {
            top += searchInput.offsetTop;
            left += searchInput.offsetLeft;
        }
        if ($("#searchvalue").val().length > 0) {
            $("#searchTips").css({ "left": left + "px", "top": top + "px" }).show();
            $("#searchTips>ul").empty().append(kendo.format(ulStringFormat, "sFlightNo","航班號")).append(kendo.format(ulStringFormat, "sTailNo", "機號"));
        }
        else {
            searchInputBlur();
        }
    }
    function fillvalue(value) {
        alert($(value).find("span:first").html());
        searchInputBlur();
    }
    function searchInputBlur() {
        $("#searchTips").hide();
    }
    function selectOption(li) {
        $("#hidSearchOption").val(($(li).find("span:last").attr("id")));
        searchInputBlur();
    }
    //搜索
    function searchContent() {
        var url = "/Manager/DutyManager?BeginTime=" + getTodayBeginUTCTime() + "&EndTime=" + getTodayEndUTCTime()
        var option = $("#hidSearchOption").val();
        var value = $("#searchvalue").val().trim();
        switch (option) {
            case "sFlightNo":
                url += "&FlightNo=" + value;
                break;
            case "sTailNo":
                url += "&TailNo=" + value;
            default:
        }
        openWindow(url);
    }

效果圖如下

2.帶上下左右鍵的

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SimulateUpDownKeySelect.html</title>
    <style type="text/css">
        #divSelect {border:1px solid red; width:208px !important;width:210px;}
        #divSelect ul {width:200px;margin:3px; margin-left:-35px;*margin-left:3px;overflow:hidden}
        #divSelect ul li {float:left; list-style-type:none;width:45px;height:14px;line-height:20px;font:14px arial;text-align:center;padding:2px}
        #divSelect li:hover {background :green;cursor:pointer}
        #txtInput {width:205px;}
    </style>
</head>
<body>
    <form method="post" action="##">
    <input type="text" id="txtInput" value="" autocomplete="off" onkeydown="if(event.keyCode==13)return false;" />
    <!--
防止回車鍵觸發表單提交
onKeyPress
-->
    <div id="divSelect">
    </div>
    <script type="text/javascript">
        var list = "<ul>"
        list += "<li>123a</li><li>戰爭片</li><li>動作片</li><li>愛情片</li><li>劇情片</li><li>記錄片</li><li>fbac</li><li>bbca</li><li>defe</li><li>gzza</li><li>恐怖片</li><li>古裝片</li><li>電視劇</li><li>讀書</li><li >小說</li><li>作品集</li><li>歷史</li><li>詩歌</li><li >散文</li><li>軍事</li>";
        list += "</ul>"
        document.getElementById('divSelect').innerHTML = list;
    </script>
    </form>
    <script type="text/javascript">
        function $(sId) {
            return document.getElementById(sId);
        }
        function clearSelectedOptBgColor(target) {
            if (target.seletedIndex >= 0)
                target.options[target.seletedIndex].style.background = "";
        }
        function setSelectedOptBgColor(target) {
            target.options[target.seletedIndex].style.background = "green";
        }
        var upKeyCode = 38;
        var downKeyCode = 40;
        var enterKeyCode = 13;
        var oInput = $("txtInput");
        oInput.options = $("divSelect").getElementsByTagName("li");
        oInput.seletedIndex = -1;
        oInput.focus();
        //oInput.onKeyPress{}
        oInput.onkeyup = function (event) {
            if (event == undefined)
                event = window.event;
            switch (event.keyCode) {
                case 37:
                    clearSelectedOptBgColor(this);
                    this.seletedIndex--;
                    if (this.seletedIndex < 0)
                        this.seletedIndex = this.options.length - 1;
                    this.value = this.options[this.seletedIndex].innerHTML;
                    setSelectedOptBgColor(this);

                    break;
                case 38:
                    clearSelectedOptBgColor(this);
                    this.seletedIndex = this.seletedIndex - 4;
                    if (this.seletedIndex < 0)
                        this.seletedIndex = this.options.length - 1;
                    this.value = this.options[this.seletedIndex].innerHTML;
                    setSelectedOptBgColor(this);

                    break;
                case 39:
                    clearSelectedOptBgColor(this);
                    this.seletedIndex++;
                    if (this.seletedIndex >= this.options.length)
                        this.seletedIndex = 0;
                    this.value = this.options[this.seletedIndex].innerHTML;
                    setSelectedOptBgColor(this);
                    break;
                case 40:
                    clearSelectedOptBgColor(this);
                    this.seletedIndex = this.seletedIndex + 4;
                    if (this.seletedIndex >= this.options.length)
                        this.seletedIndex = 0;
                    this.value = this.options[this.seletedIndex].innerHTML;
                    setSelectedOptBgColor(this);
                    break;
                case enterKeyCode:
                    this.value = this.options[this.seletedIndex].innerHTML;
                    //alert('aa')
                    break;
            }
        };
        oInput.onblur = function () {
            clearSelectedOptBgColor(this);
            this.seletedIndex = 1;
        };
    </script>
</body>
</html>

效果：

3.下面這個只帶上下鍵提示，寫的比較規范

<head>
    <title></title>
    <style type="text/css">
        #autoCompleteWp
        {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 100px auto;
            width: 300px;
            position: relative;
        }
        #datalist
        {
            position: absolute;
            left: 0;
            top: 56px;
            background: #f8f8f8;
            z-index: 2;
            border: 1px solid #FCC;
            padding: 15px;
            display: none;
        }
        #datalist li
        {
            line-height: 1.6;
            list-style: none;
            cursor: pointer;
        }
        .on
        {
            background: #06C;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="autoCompleteWp">
        請輸入郵箱：<br />
        <input id="autoComplete" type="text" />
        <ul id="datalist">
        </ul>
    </div>
        <script type="text/javascript">
            var $ = function (id) {
                return "string" == typeof id ? document.getElementById(id) : id;
            };
            var Class = {
                create: function () {
                    return function () { this.initialize.apply(this, arguments); }
                }
            }
            function addEventHandler(oTarget, sEventType, fnHandler) {
                if (oTarget.addEventListener) {
                    oTarget.addEventListener(sEventType, fnHandler, false);
                } else if (oTarget.attachEvent) {
                    oTarget.attachEvent("on" + sEventType, fnHandler);
                } else {
                    oTarget["on" + sEventType] = fnHandler;
                }
            };
            function removeEventHandler(oTarget, sEventType, fnHandler) {
                if (oTarget.removeEventListener) {
                    oTarget.removeEventListener(sEventType, fnHandler, false);
                } else if (oTarget.detachEvent) {
                    oTarget.detachEvent("on" + sEventType, fnHandler);
                } else {
                    oTarget["on" + sEventType] = null;
                }
            }
            String.prototype.trim = function () {
                return this.replace(/^\s+|\s+$/g, '');
            }
            //自動完成類
            var autoComplete = Class.create();
            autoComplete.prototype = {

                initialize: function (obj, databox, data) {
                    _this = this;
                    this.input = $(obj);
                    this.data = data;
                    this.index = 0;
                    this.datalist = $(databox).getElementsByTagName('li');
                    addEventHandler(this.input, 'keyup', this.writting);
                },
                writting: function (e) {
                    var e = e || window.event;
                    var keyCode = e.keyCode || e.charCode;  //兼容ie firefox等事件

                    switch (keyCode) {

                        case 38: //上
                            _this.index--;
                            if (_this.index < 0) {
                                _this.index = $('datalist').getElementsByTagName('li').length - 1
                            }

                            if ($('datalist').getElementsByTagName('li').length > 0) {

                                for (var k = 0; k < $('datalist').getElementsByTagName('li').length; k++) {
                                    $('datalist').getElementsByTagName('li')[k].className = ''
                                }
                            }
                            $('datalist').getElementsByTagName('li')[_this.index].className = "on";
                            break;
                        case 40:
                            _this.index++;
                            if (_this.index > $('datalist').getElementsByTagName('li').length - 1) {
                                _this.index = 0;
                            }
                            if ($('datalist').getElementsByTagName('li').length > 0) {
                                for (var k = 0; k < $('datalist').getElementsByTagName('li').length; k++) {
                                    $('datalist').getElementsByTagName('li')[k].className = ''
                                }
                            }
                            $('datalist').getElementsByTagName('li')[_this.index].className = "on"
                            break;
                        //回車         
                        case 13:
                            _this.input.value = $('datalist').getElementsByTagName('li')[_this.index].innerHTML.replace(/<\/?strong>/gi, '')  //獲取html，正則過濾標簽，只取其值
                            $('datalist').style.display = 'none'
                            break;
                        default:
                            var temp = [];
                            var val = _this.input.value.trim();
                            if (val == '') {
                                $('datalist').style.display = 'none'
                                return;
                            }
                            //如果輸入字符包含\會導致正則表達式出錯，轉換成\\即可  [ ] 等也需要轉義
                            if (val.indexOf('\\') != -1) {
                                val = val.replace(/\\/g, '\\\\')
                            }
                            var reg = new RegExp('^(' + val + ')');
                            //利用正則把匹配到的數據 加入數組
                            for (var i = 0; i < _this.data.length; i++) {
                                //如果匹配到
                                if (reg.test(_this.data[i])) {
                                    thedata = _this.data[i].replace(reg, '<strong>$1</strong>'); //利用js正則式中replace中的占位符特性
                                    temp.push('<li title="' + i + '">' + thedata + '</li>')
                                }
                                else {
                                    $('datalist').style.display = 'none'
                                }
                            }
                            //如果匹配到數據
                            if (temp.length > 0) {
                                $('datalist').innerHTML = temp.join('');
                                $('datalist').style.display = 'block';
                                var li = $('datalist').getElementsByTagName('li');
                                li[0].className = "on";
                                _this.index = 0;
                                for (var i = 0; i < li.length; i++) {
                                    li[i].onmouseover = function () {
                                        for (var i = 0; i < li.length; i++) {
                                            li[i].className = '';
                                        }
                                        this.className = 'on';
                                        _this.index = this.getAttribute('title');
                                    }
                                    //鼠標點擊
                                    li[i].onclick = function () {
                                        _this.input.value = this.innerHTML.replace(/<\/?strong>/gi, '')  //獲取html，正則過濾標簽，只取其值
                                        $('datalist').style.display = 'none'
                                    }
                                }
                            }
                            else {
                                $('datalist').innerHTML = '';
                            }
                            break;
                    }
                }
            }
            var data = ['yaofjaa@vip.qq.com', 'yaojaa008@163.com', 'yaojaa@yahoo.com', 'yaoj4aa@sohu.com.com', 'yaojaa@vipf.qq.com', 'yfaojaa@163.com', 'yaojfaa@sina.com', 'yaojaa@yahoo.com', 'yaojaa@sohu.com']
            var auto = new autoComplete('autoComplete', 'datalist', data)
    </script>
</body>
</html>

效果如下：

posted @ 2013-12-19 14:14 nd 閱讀(1780) 評論(0) 收藏舉報

刷新頁面返回頂部

js文本框提示和自動完成

公告