基于jquery的搜索框输入提示-白红宇

基于jquery的搜索框输入提示

阅读量：4071 次

发布时间：2019-05-25

本文共 1607 字，大约阅读时间需要 5 分钟。

仿百度与google的搜索框输入提示，支持键盘上下选择与鼠标点击选择。只包含前面代码，后台返回数据为模拟的数据。

1.未输入前的效果

2.输入内容后，自动弹出下拉层，里面有若干匹配输入内容的输入建议项

3.按下键盘的↑↓键可以在下面的输入提示项中进行选择，选中的项自动将文字填补到搜索输入框中（如图），也可以用鼠标点击来选中项。

4.代码 index.html

index.css

@charset "utf-8";/* CSS Document */body, ul, li {    margin: 0;    padding: 0;}body{ 	font-size:12px; 	font-family:sumsun,arial;	color:#666666;	background:#FFFFFF;}.gover_search{ position:relative; z-index:99; height:63px; padding:15px 0 0 20px; border:1px solid #b8cfe6; border-bottom:0; background:url(../images/gover_search_bg.gif) repeat-x 0 0;}.gover_search_form{height:36px;}.gover_search .search_t{ float:left; width:112px; line-height:26px; color:#666666;}.gover_search .input_search_key{ float:left; width:462px; height:18px; padding:3px; margin-right:5px; border:1px solid #cccccc; line-height:18px; background:#FFFFFF;}.gover_search .search_btn{ float:left; width:68px; height:26px; overflow:hidden; border:1px solid #cccccc; text-align:center; color:#ff3300; letter-spacing:5px; background:url(../images/gover_search_bg.gif) no-repeat 0 -79px; cursor:pointer; font-weight:bold;}.gover_search .search_suggest{ position:absolute; z-index:999; left:132px; top:41px; width:468px; border:1px solid #999999; display:none; }.gover_search .search_suggest li{height:24px; overflow:hidden; padding-left:3px; line-height:24px; background:#FFFFFF; cursor:default;}.gover_search .search_suggest li.hover{background:#DDDDDD;}

附件下载：

转载地址：http://wvhji.baihongyu.com/

你可能感兴趣的文章