搜索框的纯前端实现网页跳转

悬赏园豆：100 [已解决问题] 解决于 2017-12-15 09:48

搜索框

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaultest.aspx.cs" Inherits="Defaultest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #myInput {
            background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 搜索按钮 */
            background-position: 10px 12px; /* 定位搜索按钮 */
            background-repeat: no-repeat; /* 不重复图片*/
            width: 100%;
            font-size: 16px; /* 加大字体 */
            padding: 12px 20px 12px 40px;
            border: 1px solid #ddd;
            margin-bottom: 12px;
        }

        #myUL {
            /* 移除默认的列表样式 */
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: none;
        }

            #myUL li a {
                border: 1px solid #ddd; /* 链接添加边框 */
                margin-top: -1px;
                background-color: #f6f6f6;
                padding: 12px;
                text-decoration: none;
                font-size: 18px;
                color: black;
            }

                #myUL li a.header {
                    background-color: #e2e2e2;
                    cursor: default;
                }

                #myUL li a:hover:not(.header) {
                    background-color: #eee;
                }
    </style>
</head>
<body>
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="请输入关键字..."/>
    <ul id="myUL">
        <li><a href="#" class="header" >百度系列</a></li>
        <li><a href="https://www.baidu.com/" target="_blank">百度</a></li>
        <li><a href="http://map.baidu.com/" target="_blank">百度地图</a></li>

        <li><a href="#" class="header">百度系列2</a></li>
        <li><a href="http://news.baidu.com/" target="_blank">百度新闻</a></li>
        <li><a href="http://xueshu.baidu.com/" target="_blank">百度学术</a></li>
    </ul>
</body>
<script type="text/javascript">
    function myFunction() {
        // 声明变量
        var input, filter, ul, li, a, i;
        input = document.getElementById('myInput');
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName('li');

        // 循环所有列表，查找匹配项
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }
</script>
</html>

现在需要将以下内容实现：

程序运行时，只显示搜索框；鼠标点击搜索框，获取焦点，输入关键字将与其相关的数据显示在下拉框中，若鼠标此时移动到搜索框和下拉框之外，会隐藏根据关键字搜索出来的数据，鼠标再次点击搜索框，又会重新获取相应的数据并且会显示；鼠标点击下拉框中的名称可以进行网页跳转，且在鼠标停留的在下拉框中会发生颜色变化；

若有C#实现、前后台、数据库交互的解决方案就更好了；

感谢！！！

功能先实现代码后消化

小通 | 初学一级 | 园豆：112
提问于：2017-12-13 16:50

< >

最佳答案

目前的问题是在?

收获园豆：100

半路独行 | 小虾三级 |园豆：574 | 2017-12-13 17:05

目前就是搜索框焦点与下拉框隐藏配合得不是很好，怎么修改呢，你看一下我帖子下面的描述呢，多谢

小通 | 园豆：112 (初学一级) | 2017-12-13 17:11

@小通: 1一出来就显示了搜索框和下拉框,而你是准备只显示搜索框,2当焦点在2个框之外了,数据还是没有隐藏,貌似是这样吧?

半路独行 | 园豆：574 (小虾三级) | 2017-12-13 17:20

@半路独行: 是的

小通 | 园豆：112 (初学一级) | 2017-12-13 17:23

@小通: 在你的基础改了点下,看看咋样,2个框中间有个margin,会影响一点

半路独行 | 园豆：574 (小虾三级) | 2017-12-13 18:36

@半路独行: 嗯，我改了margin也没用，还是有影响的，感觉还是用鼠标点击事件来控制比较好（鼠标移动事件有点欠缺呢），而且程序一运行，下拉框也没隐藏成功呢，能再改进一下吗，感谢!

小通 | 园豆：112 (初学一级) | 2017-12-14 14:07

@小通: 下拉框是不是你没有给display:none,不然进去肯定会隐藏,加了点代码,效果好很多,去掉input的mar-bot

半路独行 | 园豆：574 (小虾三级) | 2017-12-14 15:31

@半路独行: 在CSS里面给下拉框加display属性会使得js搜索无效的，，，

小通 | 园豆：112 (初学一级) | 2017-12-14 17:31

@小通: 不会啊,这个代码我测试过了,你看看是不是那里没有修改过来

半路独行 | 园豆：574 (小虾三级) | 2017-12-14 17:39

@半路独行:

都改过来了呀

小通 | 园豆：112 (初学一级) | 2017-12-15 09:02

@半路独行: myUl那里我也加了display:none;（会影响搜索的）input的mar-bot也去掉了

小通 | 园豆：112 (初学一级) | 2017-12-15 09:05

@半路独行:

#myUL {
/* 移除默认的列表样式 */
list-style-type: none;
padding: 0;
margin: 0;
width: 20%;
display: none;
}

#myUL li a {
border: 1px solid #ddd; /* 链接添加边框 */
margin-top: -1px;
background-color: white;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}

#myUL li a.header {
background-color: chartreuse;
cursor: default;
}

#myUL li a:hover:not(.header) {
background-color: Highlight;
}
</style>

小通 | 园豆：112 (初学一级) | 2017-12-15 09:07

@半路独行:园友，要不把你的代码发给我看看呢，嘿嘿

小通 | 园豆：112 (初学一级) | 2017-12-15 09:09

@小通:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8" />
  5     <title></title>
  6     <style type="text/css">
  7         #myInput {
  8             background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 搜索按钮 */
  9             background-position: 10px 12px; /* 定位搜索按钮 */
 10             background-repeat: no-repeat; /* 不重复图片*/
 11             width: 100%;
 12             font-size: 16px; /* 加大字体 */
 13             padding: 12px 20px 12px 40px;
 14             border: 1px solid #ddd;
 15 
 16         }
 17 
 18         #myUL {
 19             /* 移除默认的列表样式 */
 20             list-style-type: none;
 21             padding: 0;
 22             margin: 0;
 23         }
 24 
 25             #myUL li a {
 26                 border: 1px solid #ddd; /* 链接添加边框 */
 27                 margin-top: -1px;
 28                 background-color: #f6f6f6;
 29                 padding: 12px;
 30                 text-decoration: none;
 31                 font-size: 18px;
 32                 color: black;
 33                 display: block;
 34             }
 35 
 36                 #myUL li a.header {
 37                     background-color: #e2e2e2;
 38                     cursor: default;
 39                 }
 40 
 41                 #myUL li a:hover:not(.header) {
 42                     background-color: #eee;
 43                 }
 44     </style>
 45 </head>
 46 
 47 <body>
 48     <input type="text" id="myInput" onkeyup="myFunction()" onclick="myFunction()" placeholder="请输入关键字..." />
 49     <ul id="myUL" style="display:none">
 50         <li><a href="#" class="header">百度系列</a></li>
 51         <li><a href="https://www.baidu.com/" target="_blank">百度</a></li>
 52         <li><a href="http://map.baidu.com/" target="_blank">百度地图</a></li>
 53         <li><a href="#" class="header">百度系列2</a></li>
 54         <li><a href="http://news.baidu.com/" target="_blank">百度新闻</a></li>
 55         <li><a href="http://xueshu.baidu.com/" target="_blank">百度学术</a></li>
 56     </ul>
 57 </body>
 58 </html>
 59 <script>
 60     var input, filter, ul, li, a, i, isOutUl, isOutInput;
 61     input = document.getElementById('myInput');
 62     ul = document.getElementById("myUL");
 63     li = ul.getElementsByTagName('li');
 64     function myFunction() {
 65         isOutInput = false;
 66         isOutUl = false;
 67         // 声明变量
 68         filter = input.value.toUpperCase();
 69         // 循环所有列表，查找匹配项
 70         for (i = 0; i < li.length; i++) {
 71             a = li[i].getElementsByTagName("a")[0];
 72             if (a.innerHTML.toUpperCase().indexOf(filter) > -1 && filter!='') {
 73                 li[i].style.display = "";
 74                 ul.style.display = "";
 75             } else {
 76                 li[i].style.display = "none";
 77             }
 78         }
 79     }
 80     ul.onmouseleave = function () {
 81         isOutUl = true;
 82         leave(isOutUl);
 83         //console.log("离开了ul----------" + isOutUl);
 84     }
 85    
 86     input.onmouseleave = function () {
 87         isOutInput = true;
 88         leave(isOutInput);
 89         //console.log("离开了input----------" + isOutInput);
 90     }
 91     ul.onmouseenter = function () {
 92         isOutUl = false;
 93     }
 94     input.onmouseenter = function () {
 95         isOutInput = false;
 96     }
 97     var leave = function () {
 98         setTimeout(function () {
 99             if (isOutUl && isOutInput) { ul.style.display = "none" };
100         },50)    
101     }
102 </script>
不行你把扣扣给我,远程

半路独行 | 园豆：574 (小虾三级) | 2017-12-15 09:21

@半路独行: 刚才少写了一个字母，尴尬，感谢老铁的耐心，解决了，谢谢了

小通 | 园豆：112 (初学一级) | 2017-12-15 09:47

@小通: js不是强类型,不细心很容易出错

半路独行 | 园豆：574 (小虾三级) | 2017-12-15 09:51

@小通: 还有个不妥之处：搜索框失去焦点，下拉框没有隐藏呢

小通 | 园豆：112 (初学一级) | 2017-12-15 09:55

@半路独行:

input.onblur = function () {
ul.style.display = "none";
}

ok了，已解决，嘿嘿

小通 | 园豆：112 (初学一级) | 2017-12-15 10:27

@半路独行:

当input失去焦点，下拉框隐藏，但不影响下拉框中网址的跳转，这个条件怎么写呢？
我写的这个好像控制不了：
input.onblur = function () {
if (isOutUl && isOutInput) { ul.style.display = "none" }
}

小通 | 园豆：112 (初学一级) | 2017-12-15 15:01

@小通: 2156766927,扣扣聊

半路独行 | 园豆：574 (小虾三级) | 2017-12-15 15:13

其他回答(1)

s鼠标移出的时候，写个blur事件隐藏下面数据的div还有数据的内容给清空，点击搜索框的时候在调用一次之前的那个接口方法就出来了

一只喵喵 | 园豆：36 (初学一级) | 2017-12-13 17:34

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

搜索框的纯前端实现网页跳转

欢迎，请先登录或者注册。