搜索框

最新推荐文章于 2021-07-09 14:24:23 发布

一名相声界小学生

最新推荐文章于 2021-07-09 14:24:23 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：搜索框 javascript

本文链接：https://blog.youkuaiyun.com/qq_39008205/article/details/87088224

web前端专栏收录该内容

7 篇文章

订阅专栏

怎样制作一个可以实现真正可以搜索的搜索框呢？
在这里插入图片描述
首先是html部分：

<!--文本框 ID为myInput  onkeyup 事件会在键盘按键被松开时发生调用js函数 -->
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索...">
<ul id="myUL">  <!--设置无序列表的ID属性-->
    <li><a href="###" class="header">A</a></li>
    <li><a href="###">Adele</a></li>         <!--设置多个列表-->
    <li><a href="###">Agnes</a></li>

    <li><a href="###" class="header">B</a></li>
    <li><a href="###">Billy</a></li>
    <li><a href="###">Bob</a></li>

    <li><a href="###" class="header">C</a></li>
    <li><a href="###">Calvin</a></li>
    <li><a href="###">Christina</a></li>
    <li><a href="###">Cindy</a></li>
</ul>

css 将此部分代码放到 head标签之中，会在下面给出

#myInput {
	background-image:url('//www.jq22.com/tp/6368374909440002249842396.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;
}
#myUL li a {       /* 为列表中的超链接定义样式 */
	border:1px solid #ddd;
	/* 链接添加边框 */
			margin-top:-1px;
	background-color:#f6f6f6;
	padding:12px;
	text-decoration:none;    /* 无下划线修饰 */
	font-size:18px;
	color:black;         /* 字体颜色 */
	display:block;    /* 块级样式 */
}
#myUL li a.header {          /* 为列表中的超链接头如 A B C 定义样式 */
	background-color:#e2e2e2;
	cursor:default;     /*透明度设置为默认*/
}
#myUL li a:hover:not(.header) {
	background-color:#eee;    /*鼠标悬停事件，除了header*/
}

function myFunction() {
    // 声明变量
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');  //根据给定的 id 查找文档元素
    filter = input.value.toUpperCase();      //用于把input获得的字符串转换为大写
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName('li');  //返回带有指定标签名的对象的集合

    // 循环所有列表，查找匹配项
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];  //或取第一个a标签
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { //查找a.innerHTML这个字符串里的filter内容,找到了返回filter所在的下标,取值范围是[0,∞),如果找不到,indexOf()就会返回 -1
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

完整代码

<html>
<head>
	<style type="text/css">
	#myInput {
	background-image:url('//www.jq22.com/tp/6368374909440002249842396.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;
}
#myUL li a {
	border:1px solid red;
	/* 链接添加边框 */
	margin-top:-1px;
	background-color:red;
	padding:12px;
	text-decoration:;
	font-size:18px;
	color:blue;
	display:block;
}
#myUL li a.header {
	background-color:#e2e2e2;
	cursor:default;
}
#myUL li a:hover:not(.header) {
	background-color:#eee;
}

	</style>
	<script type="text/javascript">
	function myFunction() {
    // 声明变量
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');  //根据给定的 id 查找文档元素
    filter = input.value.toUpperCase();      //用于把input获得的字符串转换为大写
    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>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索...">

<ul id="myUL">
    <li><a href="###" class="header">A</a></li>
    <li><a href="###">Adele</a></li>
    <li><a href="###">Agnes</a></li>

    <li><a href="###" class="header">B</a></li>
    <li><a href="###">Billy</a></li>
    <li><a href="###">Bob</a></li><!---->

    <li><a href="###" class="header">C</a></li>
    <li><a href="###">Calvin</a></li>
    <li><a href="###">Christina</a></li>
    <li><a href="###">Cindy</a></li>
</ul>

</body>
</html>