搜索框提示相关内容

最新推荐文章于 2019-11-12 22:24:55 发布

一只小怪

最新推荐文章于 2019-11-12 22:24:55 发布

阅读量359

点赞数 1

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_32016151/article/details/77980833

<!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>