本文实例讲述了jquery+ajax+text文本框实现智能提示的方法。分享给大家供大家参考，具体如下：
模仿百度查询的智能提示
先看看效果图：
代码部分:
CSS代码:
<style type="text/css">
#searchresult
{
width: 130px;
position: absolute;
z-index: 1;
overflow: hidden;
left: 130px;
top: 71px;
background: #E0E0E0;
border-top: none;
}
.line
{
font-size: 12px;
background: #E0E0E0;
width: 130px;
padding: 2px;
}
.hover
{
background: #007ab8;
width: 130px;
color: #fff;
}
.std
{
width: 150px;
}
</style>html代码(本文采用的asp.net页面编写的):
<body>
<form id="form1" runat="server">
<div>
智能模糊查询提示
<input id="txt_search" type="text" style="width: 150px;" />
<div id="searchresult" style="display: none;">
</div>
</div>
</form>
</body>jquery代码部分：
<script type="text/javascript">
$(function () {
$("#txt_search").keyup(function (evt) {
ChangeCoords(); //控制查询结果div坐标
var k = window.event ? evt.keyCode : evt.which;
//输入框的id为txt_search，这里监听输入框的keyup事件
//不为空 && 不为上箭头或下箭头或回车
if ($("#txt_search").val() != "" && k != 38 && k != 40 && k != 13) {
$.ajax({
type: 'Post',
//async: false, //同步执行，不然会有问题
dataType: "json",
url: "IntelligenceSelect.aspx/GetUserNameList", //提交的页面/方法名
data: "{'userName':'" + $("#txt_search").val() + "'}", //参数（如果没有参数：null）
contentType: "application/json; charset=utf-8",
error: function (msg) {//请求失败处理函数
alert("数据加载失败");
},
success: function (data) { //请求成功后处理函数。
var objData = eval("(" + data.d + ")");
if (objData.length > 0) {
var layer = "";
layer = "<table id='aa'>";
$.each(objData, function (idx, item) {
layer += "<tr class='line'><td class='std'>" + item.userName + "</td></tr>";
});
layer += "</table>";
//将结果添加到div中
$("#searchresult").empty();
$("#searchresult").append(layer);
$(".line:first").addClass("hover");
$("#searchresult").css("display", "");
