一个关于” 对input框中输入的字符进行匹配“,输入的字符串储存在哪的问题?麻烦各位大神看一下,急

我爱霄男神 发布于 2016/09/03 11:47
阅读 325
收藏 0

各位大神们好,昨天看到一个对“input框中输入的字符进行匹配,将匹配到的内容以菜单的形式展现在 input框的下方”问题,有几个疑惑想要请教。请问我自己输入的内容存到了哪里(我在敲字符串的时候发现他出现在了URL的后面)?还有我明明是对这个文本的文本框进行了设置,为什么我写的另一个html文件的文本框也具有了自动匹配功能,而且还是我在上一个浏览器里输入的那些字符串,就是换了浏览器也不行(那说明不是存储在Cookie啊)。能麻烦大神给我讲一讲您们的思路吗?拜托了,麻烦大家了,下面是代码

<!--1.  对input框中输入的字符进行匹配,将匹配到的内容以菜单的形式展现在 input框的下方; 
    2.  只针对英文字符进行匹配,并且匹配到的内容在菜单中加粗;
    3.  通过键盘上的上下箭头可以对菜单进行选择,按下回车后将选中的内容写入到 input框中;-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>input</title>


    <style>
        * {
            margin: 0;
            padding: 0;
        }


        #frm {
            width: 300px;
            margin: 100px auto;
            border: 1px solid #eee;
        }


        #put {
            width: 200px;
            height: 30px;
        }


        #sh {
            width: 200px;
            border: 1px solid red;
        }


            #sh li {
                list-style: none;
            }
    </style>
    <script>
        window.onload = function () {
            var frm = document.getElementById("frm");
            var input = document.getElementById("put");
            var ul = document.getElementById("sh");
            //alert(input.offsetLeft);
            //alert(input.offsetTop);
            ul.style.position = "absolute";
            ul.style.top = (input.offsetTop + 33) + 'px';
            ul.style.left = input.offsetLeft + 'px';
            ul.style.height = '200px';
            var arr = ["a", "aa", "aaa", "b", "bb", "bbb"];
            //alert(input.value);




            input.onkeyup = function () {
                //根据输入匹配,并将所有匹配显示出来
                ul.innerHTML = "";
                var str = input.value;
                //alert(str);
                var regStr = eval("/^" + str + "+/");//eval(string),匹配正则表达式,"^"表示模式必须位于字符串的开头
                for (var i = 0; i < arr.length; i++) {
                    //alert(arr[i]);
                    if (regStr.test(arr[i])) {     //test() 方法用于检测一个字符串是否匹配某个模式.
                        //alert(arr[i])
                        var li = document.createElement("li");
                        //alert(li);
                        //匹配的部分内容变粗
                        var len = str.length;
                        var string = arr[i].substr(len);
                        li.innerHTML = '<strong>' + str + '</strong>' + string;
                        //alert(li.innerText);
                        ul.appendChild(li);
                        //alert("sd");
                    }
                }




                //用鼠标选择li中的内容,并把input的内容替换为选中的值
                var lis = document.getElementsByTagName("li");
                //alert(lis.length);
                for (var j = 0; j < lis.length; j++) {
                    lis[j].onmouseover = function () {
                        this.style.backgroundColor = "#eee";
                    }
                    lis[j].onmouseout = function () {
                        this.style.backgroundColor = "#fff";
                    }
                    lis[j].onclick = function () {
                        //alert(this.innerHTML);
                        input.value = this.innerText || this.textContent;
                    }
                }


            }




        }
    </script>
</head>
<body>


    <form id="frm">
        <input type="text" name="put" id="put" value="haha" />
    </form>


    <ul id="sh"></ul>


</body>
</html>

加载中
返回顶部
顶部