JQuery+AJAX实现搜索文本框的输入提示功能

      平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母，下面马上会弹出一个相关信息的内容框可供选择。感觉这个功能有较好的用户体验，所以也想在自己的网站上加上这种输入提示框。

      实现的原理其实很简单，在输入页面利用JQuery获取用户输入，然后通过AJAX异步发送到处理页面，处理页面接收到值后进行模糊匹配查询，然后将结果返回，输入页收到返回的数据后在处理，并生成相应的页面显示在页面上。这样整个流程就结束了。如图：

 

      输入页可以使用keyup事件接收输入的值并发送到处理页。具体代码如下：

 

      输入页的代码如下：

//对输入提示框的CSS设置

<style>
#searchresult{width:302px; position:absolute; left:618px; top:180px;
z-index:1; overflow:hidden; background:#dcf6f8; border:#c5dadb 1px solid;
border-top:none;
}
.line{font-size:12px; color:#000; background:#aed34f; width:302px; padding:2px;}
.hover{background:#007ab8; color:#fff;}
</style>

 

//JQuery代码，别忘了要先引用JQuery的库文件哦。

<script type