百度下拉搜索

时间:2023-02-13 14:03:08

百度下拉搜索

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(
function () {
var search=$("#search");
var ul=$("ul");
var oLis=$("ul li");
var index=0;
search.focus(
function () {
ul.slideDown();
oLis.eq(
0).addClass("active");
oLis.click(
function () {
search.val($(
this).text());
});
oLis.hover(
function () {
$(
this).addClass("active").siblings().removeClass("active");
},
function () {
$(
this).removeClass("active");
});
});
search.blur(
function () {
ul.slideUp();
});
search.keydown(
function (event) {
if(event.which== 38){ // 向上
if(index==0){
index
=oLis.length-1;
}
else{
index
--;
}
}
else if(event.which==40){ // 向下
if(index==oLis.length-1){
index
=0;
}
else{
index
++;
}
}
else if(event.which == 13){ // 回车
search.val($("ul li").eq(index).text());
ul.slideUp();
index
=0;
}
oLis.eq(index).addClass(
"active").siblings().removeClass("active");
});
});
</script>
</head>
<body>
<style>
ul
{width:170px;}
ul,li
{margin:0;padding:0;}
li
{list-style:none; line-height: 30px; height: 30px;}
li:hover
{cursor:pointer;}
.active
{background-color: #0099FF;}
</style>
<input type="text" id="search">
<ul style="display: none;">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>

</body>
</html>

 网络版 下拉搜索

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<style>
*
{
margin
:0;
padding
:0;
}
.login
{
width
:400px;
margin
:0 auto;
background
:#EBEBEB;
position
:relative;
}
input
{
width
:230px;
height
:28px;
margin
:10px 0;
line-height
:28px;
}
.login .on_changes
{
width
:232px;
position
:absolute;
top
:40px;
list-style
:none;
background
:#FFF;
border
:1px solid #000;
display
:none;
padding
:10px;
}
.login .on_changes li
{
margin
:8px;
padding
:4px;
}
.login .on_changes li.active
{
background
:#CEE7FF;
}

</style>
<script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.6.1.min.js"></script>
<script>
// JavaScript Document
(function($){
$.fn.extend({
"changeTips":function(value){
value
= $.extend({
divTip:
""
}
,value)
var $this = $(this);
var indexLi = 0;
//点击document隐藏下拉层
$(document).click(function(event){
if($(event.target).attr("class") == value.divTip || $(event.target).is("li")){
var liVal = $(event.target).text();
$
this.val(liVal);
blus();
}
else{
blus();
}
}
)
//隐藏下拉层
function blus(){
$(value.divTip).hide();
}
//键盘上下执行的函数
function keychang(up){
if(up == "up"){
if(indexLi == 1){
indexLi
= $(value.divTip).children().length-1;
}
else{
indexLi
--;
}
}
else{
if(indexLi == $(value.divTip).children().length-1){
indexLi
= 1;
}
else{
indexLi
++;
}
}
$(value.divTip).children().eq(indexLi).addClass(
"active").siblings().removeClass();
}
//值发生改变时
function valChange(){
var tex = $this.val();
//输入框的值
var fronts = "";
//存放含有“@”之前的字符串
var af = /@/;
var regMail = new RegExp(tex.substring(tex.indexOf("@")));
//有“@”之后的字符串,注意正则字面量方法,是不能用变量的。所以这里用的是new方式。
//让提示层显示,并对里面的LI遍历
if($this.val()==""){
blus();
}
else{
$(value.divTip).
show().
children().
each(
function(index) {
var valAttr = $(this).attr("email");
if(index==1){
$(
this).text(tex).addClass("active").siblings().removeClass();
}
//索引值大于1的LI元素进处处理
if(index>1){
//当输入的值有“@”的时候
if(af.test(tex)){
//如果含有“@”就截取输入框这个符号之前的字符串
fronts = tex.substring(tex.indexOf("@"),0);
$(
this).text(fronts+valAttr);
//判断输入的值“@”之后的值,是否含有和LI的email属性
if(regMail.test($(this).attr("email"))){
$(
this).show();
}
else{
if(index>1){
$(
this).hide();
}
}
}
//当输入的值没有“@”的时候
else{
$(
this).text(tex+valAttr);
}
}
}
)
}
}
//输入框值发生改变的时候执行函数,这里的事件用判断处理浏览器兼容性;
if($.browser.msie){
$(
this).bind("propertychange",function(){
valChange();
}
)
}
else{
$(
this).bind("input",function(){
valChange();
}
)
}
//鼠标点击和悬停LI
$(value.divTip).children().
hover(
function(){
indexLi
= $(this).index();
//获取当前鼠标悬停时的LI索引值;
if($(this).index()!=0){
$(
this).addClass("active").siblings().removeClass();
}
}
)
//按键盘的上下移动LI的背景色
$this.keydown(function(event){
if(event.which == 38){
//向上
keychang("up")
}
else if(event.which == 40){
//向下
keychang()
}
else if(event.which == 13){
//回车
var liVal = $(value.divTip).children().eq(indexLi).text();
$
this.val(liVal);
blus();
}
}
)
}
}
)
}
)(jQuery)
//使用
$(function(){
$(
"#loginName").changeTips({
divTip:
".on_changes"
}
);
}
)

</script>
</head>
<body>
<div class="login">
<div class="ln">
<input type="text" maxlength="128" name="loginName" id="loginName" placeholder="邮箱/会员帐号/手机号" />
</div>
<ul class="on_changes">
<li email="">请选择邮箱类型
</li>
<li email="">
</li>
<li email="@sina.com">
</li>
<li email="@163.com">
</li>
<li email="@qq.com">
</li>
<li email="@hotmail.com">
</li>
<li email="@126.com">
</li>
<li email="@gmail.com">
</li>
<li email="@yahoo.com">
</li>
</ul>
</div>
</body>
</html>