数据库关键字搜索查询html,js实现搜索框关键字智能匹配代码

只要使用搜索引擎的朋友应该都有这样的体会，就是当在搜索框输入关键字的时候，会出现自能匹配现象，这绝对是非常好的用户体验，下面就是一段类似的代码，当然这里只是掩饰，所以只能匹配的数据都是本地固定好的，在实际应用中可以才能够数据库读取数据。

效果图：

代码实例如下:

搜索框关键字智能匹配实例代码

body, ul, li

{

margin:0;

padding:0;

}

body

{

font-size:12px;

font-family:sumsun, arial;

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:#666;

}

.gover_search .input_search_key

{

float:left;

width:462px;

height:18px;

padding:3px;

margin-right:5px;

border:1px solid #ccc;

line-height:18px;

background:#fff;

}

.gover_search .search_btn

{

float:left;