<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>js实现自动补全及手风琴效果</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="js实现自动补全及手风琴效果">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
ul, li {
list-style: none;
}
body {
font-size: 14px;
font-family: "微软雅黑"
}
/*设置背景*/
.bg {
/* background:
url("http://imgstore.cdn.sogou.com/app/a/100540002/714894.jpg")
no-repeat; */
background: url("http://img.netbian.com/file/2020/0710/93b4f00e30f595a020b0e7dc09338154.jpg") no-repeat;
/*background: url("image/bg.jpg") no-repeat;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}
#container {
width: 640px;
height: 70px;
margin: 260px auto;
}
.inputs {
width: 560px;
height: 45px;
border: none;
float: left;
text-indent: 1em;
font-family: "微软雅黑";
box-shadow: inset 0 0 1em #ccc
}
.searchBtn {
height: 45px;
background: #fff;
display: inline-block;
float: left;
width: 77px;
text-align: center;
line-height: 45px;
border-left: 1px solid #ccc;
font-size: 16px;
}
.searchBox {
border: 1px solid #ccc;
height: 45px;
}
#autoBox {
display: none;
}
#autoBox li {
height: 35px;
border-bottom: 1px solid #ccc;
line-height: 35px;
padding-left: 10px;
font-size: 12px;
}
#autoBox li:HOVER {
background: #eaeaea;
}
.itemBox {
width: 300px;
background: #fff;
position: absolute;
height: 100%;
top: 0;
left: 0;
}
.itemBox li {
overflow: hidden;
}
.items {
height: 32px;
border-bottom: 1px solid #ccc;
line-height: 32px;
transition: all 1s ease;
padding-left: 20px;
position: relative;
}
.showpan {
position: absolute;
top: 0;
left: 260px;
width: 100%;
height: 100%;
background: red;
}
</style>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".items").append("<div class='showpan'></div>");
$(".items").hover(function () {
$(this).find(".showpan").css("background", randomColor()).stop(true, true).animate({
left: 0
});
}, function () {
$(this).find(".showpan").css("background", randomColor()).stop(true, true).animate({
left: 260
});
});
function randomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
});
window.onload = function () {
//实现jquery中的css方法
var keyBoxDOM = function (id) {
var dom = document.getElementById(id);
return {
css: function (opts) {
for (var key in opts) {
var v = opts[key];
if (typeof v == "number") {
v += "px";
}
dom["style"][key] = v;
}
}
}
};
window.keyBoxDOM = keyBoxDOM;
//获取input输入框
var keybox = document.getElementById("keyBox");
//获取自动提示框
var autobox = document.getElementById("autoBox");
//获取下拉框
var ulbox = document.getElementById("ulBox");
//获取按钮ID
var btnChang = document.getElementById("btnChang");
var index = -1;
//var index = 0;
//重新绑定事件
keybox.onkeyup = autoComplete;
keybox.onkeydown = autoComplete;
function autoComplete() {
//拿到input 的宽度和高度
var inw = this.offsetWidth;
var inh = this.offsetHeight;
//输入框值
var value = this.value;
//验证
var check = value.match(/@/ig);
if (check && check.length > 1) {
this.value = value.substring(0, value.length - 1);
return;
}
if (value.indexOf("@") !== -1) {
keyBoxDOM("autoBox").css({
display: "block",
width: inw,
height: "215",
marginTop: 45,
background: "#f9f9f9"
});
//拼接数据
ulbox.innerHTML = getMailHTML(value);
//动态绑定事件
var lis = ulbox.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
keybox.value = this.innerHTML;
keybox.onkeyup = autoComplete;
keybox.onkeydown = autoComplete;
}
}
}
}
//通过键盘控制
document.onkeyup = function (e) {
//键码38 40
var ev = e || window.event;
var code = ev.keyCode || ev.which;
//获取所有的li
var lis = ulbox.children;
/* if (code == 40) {//向下
keybox.onkeyup = null;
keybox.onkeydown = null;
if (index == lis.length) {
index = 0;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.background = "none";
}
lis[index].style.background = "#ccc";
keybox.value = lis[index].innerHTML;
index++;
}
if (code == 38) {//向上
} */
if (code === 40) {//向下
keybox.onkeyup = null;
keybox.onkeydown = null;
if (index === lis.length - 1) {
index = 0;
} else {
index++;
if (index > lis.length - 1) {
index = 0;
}
}
if (index !== -1) {
for (var i = 0; i < lis.length; i++) {
lis[i].style.background = "none";
}
lis[index].style.background = "#ccc";
keybox.value = lis[index].innerHTML;
}
}
if (code === 38) {//向上
if (index === -1) {
index = lis.length - 1;
} else {
index--;
if (index < 0) {
index = lis.length - 1;
}
}
if (index !== -1) {
for (var i = 0; i < lis.length; i++) {
lis[i].style.background = "none";
}
lis[index].style.background = "#ccc";
keybox.value = lis[index].innerHTML;
}
}
if (code === 13) {//回车键
autobox.style.display = "";
}
};
function getMailHTML(value) {
var arr = ["163.com", "126.com", "qq.com", "gmail.com", "sohu.com", "sina.com"];
var html = "";
for (var i = 0; i < arr.length; i++) {
//html += "<li onclick='selectMe(this);'>" + value + arr[i] + "</li>";
html += "<li>" + value + arr[i] + "</li>";
}
return html;
}
//静态绑定
/*function selectMe(obj) {
document.getElementById("keybox") = obj.innerHTML;
}*/
autobox.onmouseleave = function () {
this.style.display = "none";
};
btnChang.onmouseover = function () {
this.style.background = "#eaeaea";
};
btnChang.onmouseleave = function () {
this.style.background = "#f9f9f9";
}
}
</script>
</head>
<body>
<!-- 设置背景 -->
<div class="bg"></div>
<div id="container">
<div class="searchBox" style="">
<input type="text" class="inputs" id="keyBox" placeholder="请输入邮箱"/>
<a href="" class="searchBtn" id="btnChang">搜索</a>
<div id="autoBox">
<ul id="ulBox">
</ul>
</div>
</div>
</div>
<div>
<ul class="itemBox">
<li class="items">0</li>
<li class="items">1</li>
<li class="items">2</li>
<li class="items">3</li>
<li class="items">4</li>
<li class="items">5</li>
<li class="items">6</li>
<li class="items">7</li>
<li class="items">8</li>
<li class="items">9</li>
<li class="items">0</li>
<li class="items">1</li>
<li class="items">2</li>
<li class="items">3</li>
<li class="items">4</li>
<li class="items">5</li>
<li class="items">6</li>
<li class="items">7</li>
<li class="items">8</li>
</ul>
</div>
</body>
</html>
- 大小: 638 KB
分享到：
相关推荐
这种插件实现了手风琴式的折叠展开效果，通常用于显示和隐藏内容，节省空间并增强页面的可读性。 9. **map百度地图封装js**： 百度地图API提供了一个JavaScript接口，用于在网页中集成地图功能。封装后的js可能...
Widgets是jQuery UI的核心，包括Accordion（手风琴效果）、Autocomplete（自动补全）、Dialog（对话框）等。Effects则提供了各种动画效果，如Fade（淡入淡出）、Slide（滑动）等。Position模块提供了元素相对定位的...
搜索组件与查询组件类似，但可能包含更多高级功能，如自动补全、过滤选项等。在大型数据集的搜索场景中，它能提供更高效的搜索体验。 9. **提示组件**： 提示组件用于显示临时通知，如信息提示、成功消息、错误...
- **Accordion（手风琴）**: 可折叠的面板，允许用户逐个展开或全部隐藏内容。 - **Tabs（选项卡）**: 将内容分隔成多个可切换的面板，提高页面组织性。 - **Slider（滑块）**: 用于选择数值或进行等级评价的滑动...
- **其他组件**：如 accordions（手风琴效果）、tabs（选项卡）和 autocompleter（自动补全）等，增强了用户界面的交互性。 **使用Script.aculo.us的步骤** 1. **引入库**：在HTML文件中添加Script.aculo.us和...
2. **UI组件**：script.aculo.us包含了许多可重用的UI组件，如Autocompleter（自动补全）、Draggable（可拖动元素）、Slider（滑块）和Sortable（可排序列表）等，这些组件极大地提升了用户体验。 3. **Builder模块...
它提供了一系列丰富、交互式的界面元素，如对话框、拖放功能、日期选择器、进度条、 accordions（手风琴效果）和 tabs（选项卡）等，帮助开发者快速构建美观且易于操作的网页应用。 ### 1. jQuery UI 的核心组件 -...
- **Accordion（手风琴）**：允许在一个容器内展示多个折叠面板，每次只能打开一个。 - **Slider（滑块）**：创建可拖动的滑块，常用于设置值或者进度控制。 - **Datepicker（日期选择器）**：为输入字段添加日期...
2. **Accordion（手风琴）**：手风琴组件允许内容以折叠/展开的方式呈现，节省页面空间，用户可以根据需要查看详细信息。 3. **Dialog（对话框）**：对话框组件创建可自定义的模态或非模态窗口，用于提示、确认、...
- **Accordion（手风琴）**: 将多个段落折叠成一列，每次只能展开一个段落。 - **Slider（滑块）**: 提供一种可滑动的选择器，常用于调整数值或选择范围。 - **Datepicker（日期选择器）**: 为输入字段提供一个日历...
2. **Accordion（手风琴）**：手风琴组件允许在一个有限的空间内展示多个可折叠的面板，展开一个面板时其他面板会自动关闭，适合用于展示层次结构的信息。 3. **Tabs（选项卡）**：选项卡组件用于将内容分隔到不同...
- **Autocomplete（自动补全）**: 提供搜索建议，帮助用户快速输入。 - **Button（按钮）**: 将HTML链接或输入元素转换为具有视觉吸引力的按钮。 - **Dialog（对话框）**: 创建模态或非模态窗口，用于显示通知、...
6. **Autocomplete（自动补全）**：为输入框添加自动补全功能，提升输入效率，常见于搜索框和表单填充。 7. **Sortable（可排序）**：允许用户通过拖放操作对列表或表格进行排序，适用于内容管理或任务管理界面。 ...
最后，ui 文件夹是jQuery UI的核心组件所在，包括了如Accordion（手风琴）、Autocomplete（自动补全）、DatePicker（日期选择器）、Dialog（对话框）、Draggable（可拖动）、Droppable（可放置）、Resizable（可调整...
- Accordion（手风琴）：允许在一个有限的空间内显示多个折叠面板，只显示一个面板内容。 - AutoComplete（自动完成）：为输入框提供自动补全功能，常见于搜索框或表单填写。 - DatePicker（日期选择器）：提供...
5. **自动完成（Autocomplete）**：为输入框提供自动补全功能，提升输入效率，适用于搜索框、表单填写等场景。 6. **布局工具**：如Accordion（手风琴）和Tabs（标签页），有助于组织内容，节省页面空间。 7. **...
8. **Autocomplete（自动补全）**：为输入框添加自动补全功能，可以根据用户输入的字符提供匹配建议。 9. **Effects（特效）**：提供了多种动画效果，如淡入淡出、滑动等，让页面过渡更加平滑。 ### 学习与应用 ...
- **Accordion（手风琴）**：允许用户展开和折叠内容区域，节省页面空间。 - **Slider（滑块）**：用于数值选择或时间调整，常见于音量控制、进度条等场景。 - **Tabs（标签页）**：将内容分割到多个标签页中，提高...
- **Accordion（手风琴）**：展示折叠内容，只允许一次打开一个部分，常用于节省空间展示大量信息。 - **Tabs（标签页）**：将内容组织成多个标签页，方便用户切换查看。 - **Slider（滑块）**：提供一种直观的...
- **Accordion（手风琴）**：将多个内容区域折叠在一组容器内，每次只能展开一个。 - **Slider（滑块）**：用于选择数值或进行等级评分的滑动条。 - **Tabs（标签页）**：将内容分隔到不同的标签页中，方便切换。...