zoukankan      html  css  js  c++  java
  • javascript 根据输入的关键词自动提示

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="theme/js/jquery-1.8.3.min.js"></script>
        <style type="text/css">
            @charset "utf-8";
            /* CSS Document */
    
            body, ul, li {
                margin: 0;
                padding: 0;
            }
    
            body {
                font-size: 12px;
                font-family: sumsun,arial;
                color: #666666;
                background: #FFFFFF;
            }
    
    
    
            .gover_search {
                position: relative;
                z-index: 99;
                height: 63px;
                padding: 15px 0 0 20px;
                /*border: 1px solid #b8cfe6;*/
                border-bottom: 0;
                /*background: url(../images/gover_search_bg.gif) repeat-x 0 0;*/
            }
    
            .gover_search_form {
                height: 36px;
            }
    
            .gover_search .search_t {
                float: left;
                 112px;
                font-size: 14px;
                line-height: 26px;
                color: #666666;
            }
    
            .gover_search .input_search_key {
                float: left;
                 462px;
                height: 18px;
                padding: 3px;
                margin-right: 5px;
                border: 1px solid #cccccc;
                line-height: 18px;
                background: #FFFFFF;
            }
    
            .gover_search .search_btn {
                float: left;
                 68px;
                height: 26px;
                overflow: hidden;
                border: 1px solid #cccccc;
                text-align: center;
                color: #ff3300;
                letter-spacing: 5px;
                /*background: url(../images/gover_search_bg.gif) no-repeat 0 -79px;*/
                cursor: pointer;
                font-weight: bold;
            }
    
            .gover_search .search_suggest {
                position: absolute;
                z-index: 999;
                left: 132px;
                top: 41px;
                 468px;
                border: 1px solid #999999;
                display: none;
            }
    
                .gover_search .search_suggest li {
                    height: 24px;
                    overflow: hidden;
                    padding-left: 3px;
                    line-height: 24px;
                    background: #FFFFFF;
                    cursor: default;
                }
    
                    .gover_search .search_suggest li.hover {
                        background: #DDDDDD;
                    }
    
            .showAnswer {
                 450px;
                height: auto;
                min-height: 200px;
                margin-left: 132px;
                border: 1px solid #dddddd;
                padding: 10px 10px 10px 10px;
                line-height: 20px;
            }
        </style>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="gover_search">
                <div class="gover_search_form clearfix">
                    <span class="search_t">关键词匹配搜索</span>
                    <input type="text" class="input_search_key" id="gover_search_key" placeholder="请输入关键词直接搜索" />
                    <button type="button" class="search_btn">搜索</button>
                    <div class="search_suggest" id="gov_search_suggest">
                        <ul>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="answer" class="showAnswer"></div>
        </form>
    </body>
    </html>
    

      

    <script type="text/javascript">
        //实现搜索输入框的输入提示js类  
        function OSearchSuggest(searchFuc) {
            var input = $('#gover_search_key');
            var suggestWrap = $('#gov_search_suggest');
            var key = "";
            var init = function () {
                input.bind('keyup', sendKeyWord);
                input.bind('blur', function () { setTimeout(hideSuggest, 500); });
            };
            var hideSuggest = function () {
                suggestWrap.hide();
            };
    
            //发送请求,根据关键字到后台查询  
            var sendKeyWord = function (event) {
                //键盘选择下拉项  
                if (suggestWrap.css('display') == 'block' && event.keyCode == 38 || event.keyCode == 40) {
                    var current = suggestWrap.find('li.hover');
                    if (event.keyCode == 38) {
                        if (current.length > 0) {
                            var prevLi = current.removeClass('hover').prev();
                            if (prevLi.length > 0) {
                                prevLi.addClass('hover');
                                input.val(prevLi.html());
                            }
                        } else {
                            var last = suggestWrap.find('li:last');
                            last.addClass('hover');
                            input.val(last.html());
                        }
    
                    } else if (event.keyCode == 40) {
                        if (current.length > 0) {
                            var nextLi = current.removeClass('hover').next();
                            if (nextLi.length > 0) {
                                nextLi.addClass('hover');
                                input.val(nextLi.html());
                            }
                        } else {
                            var first = suggestWrap.find('li:first');
                            first.addClass('hover');
                            input.val(first.html());
                        }
                    }
    
                    //输入字符  
                } else {
                    var valText = $.trim(input.val());
                    if (valText == '' || valText == key) {
                        return;
                    }
                    searchFuc(valText);
                    key = valText;
                }
    
            };
    
            //请求返回后,执行数据展示  
            this.dataDisplay = function (data) {
                if (data.length <= 0) {
                    suggestWrap.hide();
                    return;
                }
                //往搜索框下拉建议显示栏中添加条目并显示  
                var li;
                var tmpFrag = document.createDocumentFragment();
                suggestWrap.find('ul').html('');
                for (var i = 0; i < data.length; i++) {
                    li = document.createElement('LI');
                    li.innerHTML = data[i];
                    tmpFrag.appendChild(li);
                }
                suggestWrap.find('ul').append(tmpFrag);
                suggestWrap.show();
    
                //为下拉选项绑定鼠标事件  
                suggestWrap.find('li').hover(function () {
                    suggestWrap.find('li').removeClass('hover');
                    $(this).addClass('hover');
                }, function () {
                    $(this).removeClass('hover');
                }).bind('click', function () {
                    //给文本框赋值
                    input.val(this.innerHTML);
                    suggestWrap.hide();
                });
            };
            init();
        };
    
        //实例化输入提示的JS,参数为进行查询操作时要调用的函数名  
        var searchSuggest = new OSearchSuggest(sendKeyWordToBack);
        //这是一个模似函数,实现向后台发送ajax查询请求,并返回一个查询结果数据,传递给前台的JS,再由前台JS来展示数据。
        //参数为一个字符串,是搜索输入框中当前的内容  
        function sendKeyWordToBack(keyword) {
            $.ajax({
                type: "post",
                url: "/Ajax/GetAutoComplete.ashx",
                data: { Keywords: keyword },
                success: function (data) {
                    var json = eval("(" + data + ")");
                    var aData = [];
                    for (var i = 0; i < json.length; i++) {
                        //以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回  
                        if (json[i] != "") {
                            aData.push(json[i].Question);
                        }
                    }
                    //将返回的数据传递给实现搜索输入框的输入提示js类  
                    searchSuggest.dataDisplay(aData);
                },
                error: function () {
    
                },
            });
        }
    
        $(function () {
            $(".search_btn").bind("click", function () {
                if ($("#gover_search_key").val() == "") {
                    alert("请输入你要搜索的关键词!");
                    return false;
                }
                $.ajax({
                    type: "post",
                    url: "/Ajax/GetAutoComplete.ashx",
                    data: { Keywords: $("#gover_search_key").val() },
                    success: function (data) {
                        console.info(data);
                        if (data != null) {
                            var msg = eval("(" + data + ")");
                            $("#answer").html(msg[0].Answer);
                        } else {
                            $("#answer").html("没有相关的答案!");
                        }
                    }
                });
            });
        });
    
    </script>
    

      

    将来的你,一定会感谢现在努力的自己!
  • 相关阅读:
    Redis设置过期时间
    javascript 进制转换(2进制、8进制、10进制、16进制之间的转换)
    123456---com.twoapp.fengkuangqiuqiu---疯狂球球
    123456---com.twoapp.taiKongLvXing---太空旅行
    123457---com.twoapp.shuXueYouXi---小学数学口算
    123456---com.twoapp.huanYingMotro--- 幻影摩托
    123456---com.twoapp.xiaoxiaofeixingyuan---小小飞行员
    123456---com.twoapp.xiaoxiaozuqiujiang---小小足球将
    123457---脑筋急转弯01--com.threeObj03.JiZhuanWan
    123457---小小数学家--com.twoapp.xiaoxiaoshuxuejia
  • 原文地址:https://www.cnblogs.com/GreatPerson/p/7610062.html
Copyright © 2011-2022 走看看