Html
    Css
    Js

    
                        
        * {
	margin:0;
	padding:0;
}
ul li {
	list-style:none;
}
a {
	text-decoration:none;
}
.box {
	width:600px;
}
.box1 {
	width:300px;
	height:auto;
	margin:30px 70px;
	float:left;
	position:relative;
}
.box1 .inputCont {
	width:200px;
	height:36px;
	line-height:36px;
	position:absolute;
	top:0;
	left:0;
}
.box1 #dynamicUl {
	width:200px;
	height:auto;
	border:1px solid yellow;
	position:absolute;
	left:0;
	top:40px;
}
.box1 #dynamicUl li {
	width:200px;
	height:36px;
	line-height:36px;
	border-bottom:1px solid #ccc;
}
.box2 {
	width:200px;
	height:auto;
	float:right;
	margin-top:-30px;
}
.box2 #data {
	width:200px;
	height:auto;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.9.1
 立即下载

jQuery简单的检索框

1.在左边输入内容,如果数据库里面存在你输入的内容,那就显示出来;然后点击内容,text()就填充到input框中

2.有很多时候,就有关键字搜索,如果你输入的内容,在你的数据库里面有,就类似百度搜素时候,输入框下面就会一一列出一些内容,如果有符合你想要的内容,你就可以直接选择你想要的内容

3.我这里是写的一个模拟数据,真正用的时候需要用ajax进行搜索数据库里面的内容

2
      滴滴答答0
      2017/8/9 15:54:05

      恩 ,有时间了改上,谢谢提出。

      回复
      逍遥姚0
      2017/8/3 19:53:51
      有Bug,删除框内数据,下拉框内容不清空 回复