zoukankan
html css js c++ java
模拟搜索结果项
要求:
1. 点击input框显示下拉列表。
2. 选中下拉列表值后关闭列表。
3. 方向键可选列表中的项。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>模拟搜索结果项 - 豪情</title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} q:before,q:after{content:'';} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} abbr,acronym{border:0;font-variant:normal;} a{color:#333;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} .demo{ 550px;margin:50px auto;} .input{543px; height:30px; line-height:30px; padding:3px 0 3px 5px; border:1px solid #ccc;background:#fff;} .demo .hover{ display:block;} .list{ border:1px solid #817f82;background:#fff; display:none;} .list li{548px; text-indent:1em;display:block; height:28px; line-height:28px;} .list li.cur{background:#ebebeb; text-decoration:none;} </style> </head> <body> <div class="demo"> <input class="input" type="text" name="" id="input" /> <ul id="list" class="list"> <li>豪情</li> <li>sina</li> <li>网易邮箱</li> <li>新浪微博</li> <li>腾讯微信</li> </ul> </div> <script type="text/javascript"> function id(){ return document.getElementById(arguments[0]); } (function(window){ var input = id('input'), list = id('list'), oA = list.getElementsByTagName('li'); // show list input.onclick = function(){ var items = null; list.className = 'list hover'; // set first current css for(var i = 0; i < oA.length; i++){ items = oA[i]; if(input.value && items.innerHTML == input.value){ items.className = 'cur'; } } } // set first input val input.value = oA[0].innerHTML; // hide list document.documentElement.onclick = function(e){ e = e ? e.target : window.event.srcElement; if(e.tagName.toLowerCase() == 'body' || e.tagName.toLowerCase() == 'html'){ list.className = 'list'; } } var oLi = null; for(var i = 0; i < oA.length; i++){ oLi = oA[i]; // click hide list and set input val oLi.onclick = function(){ list.className = 'list'; input.value = this.innerHTML; } oLi.onmouseover = function(){ // clear all selected css for(var j = 0; j < oA.length; j++){ oA[j].className = ''; } this.className = 'cur'; } oLi.onmouseout = function(){ this.className = ''; } } // keyboard trigger document.documentElement.onkeydown = function(e){ e = e || window.event; var target = e.target || e.srcElement, kcode = 0, index = getItems() || 0; if(target.tagName.toLowerCase() == 'input' && list.className == 'list hover'){ kcode = e.keyCode; switch(kcode){ case 13 : // enter list.className = 'list'; break; case 37 : // left case 38 : // up /* if(index > 0){ // if min hover(oA[index - 1]); } else { hover(oA[oA.length - 1]); } */ hover(oA[index > 0 ? index - 1 : oA.length - 1]); break; case 39 : // right case 40 : // down /* if(index < oA.length - 1){ // if max hover(oA[index + 1]); } else { hover(oA[0]); } */ hover(oA[index > 0 ? index + 1 : 0]); break; } } } // get current index function getItems(){ for(var i = 0; i < oA.length; i++){ if(oA[i].className == 'cur'){ return i; } } } // set hover class function hover(obj){ for(var i = 0; i < oA.length; i++){ oA[i].className = ''; } obj.className = 'cur'; input.value = obj.innerHTML; } }(window)); </script> </body> </html>
运行代码
查看全文
相关阅读:
如何利用JMeter模拟超过 5 万的并发用户
JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传
jmeter内存溢出处理方式记录
JMeter压力测试入门教程[图文]
本机Tomcat启动myeclipse,用Jmeter录制脚本端口冲突解决办法
Jmeter 录制脚本
Jmeter基础之---jmeter基础概念
Jmeter性能测试 入门
SSH Secure Shell Client安装和使用
面向对象2
原文地址:https://www.cnblogs.com/jikey/p/2958880.html
最新文章
安卓源码总体结构(1)基础知识汇总
安卓源码总体结构
安卓源码总体结构(1)基础知识汇总
分享》:关于阅读开源项目的源码思路方法
Aritest自动化笔记六:Aritest图像识别之Assert相关的 API
Aritest自动化笔记五:图像识别API-text和keyevent和snapshot和sleep
Aritest自动化笔记四:图像识别API-swipe滑动的使用
Aritest自动化笔记三:Aritest核心库-图像识别
Aritest自动化笔记二:Aritest连接模拟器或真机
Aritest自动化笔记一:环境搭建
热门文章
java-方法递归
新书推荐 | 深入理解Java虚拟机:JVM高级特性与最佳实践(第3版)_小蓝筑梦,斩获 offer
JS 基础学习
iOS swift ipad使用系统自带分享 弹框失败没有弹框
iOS Xcode 13.4 13.5真机调试包--更新
DJI FPV 使用教程:激活、对码、设置。数字图传体验
2020最新跨境收款App Store/Google Play/App Store/FaceBook/Amazon/收款的科学姿势
iOS UIImagePickerController权限声明、判断;拍照获取相册,照片、视频,存储本地相册
iOS 项目报错Command /Applications/Xcode.app/Contents/Developer/usr/bin/actool failed with exit code 255
MySQL查看数据库、表的占用空间大小
Copyright © 2011-2022 走看看