搜索框提示相关内容

来源：互联网发布：淘宝链接转淘客链接编辑：程序博客网时间：2024/06/05 22:34
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <style>            ul {                border: solid #31B0D5 1px;                padding-left: 0px;                width: 302px;            }            li {                text-align: left;                width: 100%;                height: 20px;                list-style: none;            }            li:hover {                background-color: #BCE8F1;            }            button {                background-color: #3385ff;                color: white;                border: 0;                height: 26px;                line-height: 26px;                width: 59px;                vertical-align: bottom;            }        </style>        <div style="margin-left: 30%;">            <input style="width: 300px;height: 20px;line-height: 20px;vertical-align: bottom;" id="content" type="text" onkeyup="getText()" onfocus="$('#correlate').show()" onblur="$('#correlate').hide()" />            <button onclick="alert($('#content').val())">搜索</button>        </div>        <div id="correlate" style="margin-left: 30%;margin-top: -17px;"> </div>    </body>    <script type="text/javascript" src="../js/jquery.min.js"></script>    <script type="text/javascript">        //onkeyup在输入框中输入数据时执行        //onblur失去焦点        //onfocus获得焦点        //mouseover        //onmouseout        var xmlHttp;        //获取输入框内容        function getText() {            //得到输入框内容            var content = $('#content').val();            //          xmlHttp=createXMLHttp();            //          var url="search?keyword="+escape(content);//escape解决中文问题            //          xmlHttp.open("GET",url,true);//true代表js脚本在send方法后继续执行，不等待服务器的响应            //          //xmlHttp状态改变时调用回调方法，状态0-4            //          xmlHttp.onreadystatechange=callback;            //          xmlHttp.send(null);            //添加内容前删除上次内容            $('#correlate').empty();            //添加内容            var li = "";            for(var i = 0; i < 5; i++) {                li = li + "<li onmousedown=\"setInputValue('" + i + "')\">" + i + "</li>";            }//          li = li + "<li onmousedown=\"setInputValue('" + content + "')\">" + content + "</li>";            $('#correlate').append("<ul>" + li + "</ul>");        }        /**         * 点击关联内容自动设置输入框中的值         */        function setInputValue(content) {            $('#content').val(content);            $('#correlate').hide();        }        //创建XMLHTTP对象        function createXMLHttp() {            //大多浏览器适用            if(window.XMLHttpRequest) {                xmlHttp = new XMLHttpRequest();            }            if(window.ActiveXObject) {                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");                if(!xmlHttp) {                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");                }            }            return xmlHttp;        }        //回调函数        function callback() {            //4代表成功            if(xmlHttp.readyState == 4) {                //200                if(xmlHttp.status == 200) {                    var result = xmlHttp.responseText;                    var json = eval("(" + result + ")");                    //展示数据                }            }        }    </script></html>
阅读全文
0 0