搜索框自动补全

最新推荐文章于 2024-05-14 15:13:43 发布

卤蛋会敲代码

最新推荐文章于 2024-05-14 15:13:43 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45180769/article/details/97825548

版权

简单版：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="content">
<div class="search">
<div style="width: 540px; height: 32px; float: left;">
<input type="text" id="input">
</div>
<div style="width: 100px; height: 32px; float: left;">
<input type="button" value="Look一下">
</div>
<div class="list">
<ul id="ul">
</ul>
</div>

</div>
</div>
<script>
//页面加载之后立即执行一段 JavaScript：
document.getElementById("input").onfocus = function(){
this.style.borderColor = "#3385ff";
}
//当用户离开输入字段时对其进行验证：
document.getElementById("input").onblur = function(){
this.style.borderColor = "initial";
ul.style.display = "none";
}
//当元素获得用户输入时运行的脚本
document.getElementById("input").oninput = function(){
select();
}
//onpropertychange事件实时触发，即每添加或删除一个字符就会触发,通过js改变也会触发该事件
    document.getElementById("input").onpropertychange = function(){
select();
}
//定义基本补全数据
var data = ["你真好", "你好吗", "你好", "我爱人类", "我爱世界", "我爱中国", "我爱我", "我爱你", "我操", "哈哈2", "哈哈1", "T228", "T220", "T221", "T222", "T224", "T225", "T223", "T227", "T226"];
var ul=document.getElementById("ul");

function select(){
var value=document.getElementById("input").value;
if(value != ""){
ul.innerHTML = "";
for (var i=0;i<data.length;i++) {
if(data[i].indexOf(value.toUpperCase())==0){
//创建指定类型的新结点
var li=document.createElement("li");
li.innerHTML=data[i];
//在指定元素节点的最后一个子节点之后添加节点。
ul.appendChild(li);
ul.style.display="block";
}
}
}else{
ul.style.display="none";
}
}
</script>
</body>
</html>

在这里插入图片描述
加入css样式的版本

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.content{
height: 500px;
border: 1px solid #fff;
}
.search{
width: 640px;
margin: 0 auto;
height: 36px;
background-color: #666666;
margin-top: 232px;
}
.search input[type=text]{
width: 528px;
height: 32px;
outline: none;
padding-left: 8px;
}
.search input[type=button]{
width: 100px;
height: 36px;
outline: none;
border: none;
color: #F0F8FF;
background-color: #317EF3;
}
.list ul{
width:540px ;
clear: both;
border-top: none;
border: 1px solid #A9A9A9;
display: none;
list-style: none;
}
.list ul li{
padding-top: 10px;
padding-left: 8px;
}
.list ul li:hover{
background-color: #CCC;
}
</style>
</head>
<body>
<div class="content">
<div class="search">
<div style="width: 540px; height: 32px; float: left;">
<input type="text" id="input">
</div>
<div style="width: 100px; height: 32px; float: left;">
<input type="button" value="Look一下">
</div>
<div class="list">
<ul id="ul">
</ul>
</div>

</div>
</div>
<script>
//页面加载之后立即执行一段 JavaScript：
document.getElementById("input").onfocus = function(){
this.style.borderColor = "#3385ff";
}
//当用户离开输入字段时对其进行验证：
document.getElementById("input").onblur = function(){
this.style.borderColor = "initial";
ul.style.display = "none";
}
//当元素获得用户输入时运行的脚本
document.getElementById("input").oninput = function(){
select();
}
//onpropertychange事件实时触发，即每添加或删除一个字符就会触发,通过js改变也会触发该事件
    document.getElementById("input").onpropertychange = function(){
select();
}
//定义基本补全数据
var data = ["你真好", "你好吗", "你好", "我爱人类", "我爱世界", "我爱中国", "我爱我", "我爱你", "我操", "哈哈2", "哈哈1", "T228", "T220", "T221", "T222", "T224", "T225", "T223", "T227", "T226"];
var ul=document.getElementById("ul");

function select(){
var value=document.getElementById("input").value;
if(value != ""){
ul.innerHTML = "";
for (var i=0;i<data.length;i++) {
if(data[i].indexOf(value.toUpperCase())==0){
//创建指定类型的新结点
var li=document.createElement("li");
li.innerHTML=data[i];
//在指定元素节点的最后一个子节点之后添加节点。
ul.appendChild(li);
ul.style.display="block";
}
}
}else{
ul.style.display="none";
}
}
</script>
</body>
</html>

在这里插入图片描述

卤蛋会敲代码

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
搜索框自动补全

简单版：<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loos...
复制链接

扫一扫