首页 新闻 搜索 专区 学院

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

0
悬赏园豆: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
< >
分享
最佳答案
0

目前的问题是在?

收获园豆: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

@半路独行: 

<script type="text/javascript">
var input, filter, ul, li, a, i, isOutUl, isOutInput;// 声明变量
input = document.getElementById('myInput');//获取搜索框的输入值
ul = document.getElementById("myUL");//下拉框
li = ul.getElementsByTagName('li');
function myFunction() {
isOutInput = false;
isOutUl = false;
filter = input.value.toUpperCase();//将搜索框中的值转换成大写
// 循环所有列表,查找匹配项
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];//取得链接
if (a.innerHTML.toUpperCase().indexOf(filter) > -1 && filter != '') {
li[i].style.display = "";//如果是需要,则显示
ul.style.display = "";
} else {
li[i].style.display = "none";//否则,不显示
}
}
}
ul.onmouseleave = function () {
isOutUl = true;
leave(isOutUl);
}
input.onmouseleave = function () {
isOutInput = true;
leave(isOutInput);
}
var leave = function () {
if (isOutUl && isOutInput) { ul.style.display = "none" };
}
ul.onmouseenter = function () {
isOutUl = false;
}
input.onmouseenter = function () {
isOutInput = false;
}
var leave = function () {
setTimeout(function () {
if (isOutUl && isOutInput) { ul.style.display = "none" };
}, 50)
}
</script>

都改过来了呀

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

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

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

@半路独行: 

<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: 20%;
font-size: 16px; /* 加大字体 */
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
/*margin-bottom: 12px;*/
}

#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)
0

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

Almmy❀ | 园豆:36 (初学一级) | 2017-12-13 17:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册