用jQuery的ajax的功能实现输入自动提示的功能
注意事项:要使用jQuery首先要把它的包引用进来( <script type="text/javascript" language="javascript" src="js/jquery-1.2.3.js"></script>)
本功能实现的原理简述:通过输入框的keyup事件,在后台把输入框当前的数据传入后台进行处理(以json格式传输),本例的后台处理文件是一个ashx文件。后台得到json数据后从数据库里取数据,然后回传到前台;前台显示的是一个类似百度和谷歌的下拉框,本例是这样实现的,把从后台传过来的每一个记录,通过jQuery动态生产一个<li></li>,然后把这些li放到一个div里取,再给这些li设置CSS,然后根据CSS就可以选择记录。
请看代码:
前台:
js文件:
<script language="javascript" type="text/javascript">
$(function(){
$("#keyword").bind("keyup",triggerAjax).bind("blur",input_blur);
$("body").click(li_click); //很奇怪,在dvResult低边框以下click时不会触发li_click事件,这个问题还需改进
});
function triggerAjax()
{
$.get("AutoComplete.ashx",SendingData(),callback);
}
function input_blur()
{
if($(".MouseOverLi").size()>0)//判断是否选择了项
{
$("#keyword").val($(".MouseOverLi").html());//选了某一项,则把它的值赋给输入框
$("#dvResult").fadeOut("3000"); // 隐藏div
}
}
function li_click()
{
//$("#keyword").val($(this).html());
$("#dvResult").fadeOut("3000"); // 隐藏div
}
// 回调函数,处理从服务器端返回的数据
function callback(data)
{
$("#dvResult").slideDown("3000");
if(data!="")
{
$("#dvResult").html(""); //清空前一次返回的数据
var keys = data.split(";"); //把返回的字符串(以;分割)转变成数组
var len = keys.length;
for(count = 0;count<len-1;count++)
{
$("#dvResult").append("<div class='item'>"+keys[count]+"</div>");
}
$("#dvResult").addClass("HasDataDiv");
$(".item").mouseover(function(){$(this).addClass("MouseOverLi");});
$(".item").mouseout(function(){$(this).removeClass("MouseOverLi");});
//选中值
$(".item").click(function(){
$("#keyword").val($(".MouseOverLi").html());//选了某一项,则把它的值赋给输入框
$("#dvResult").fadeOut("2000"); // 隐藏div
});
}
else
{
$("#dvResult").html($("#keyword").val()+" 不存在!");
}
}
// 向服务器端发送要处理的数据
function SendingData()
{
var keyword,table,field,_json;
_keyword = $("#keyword").val(); //检索用到的关键字
_table = "Users"; //数据库名称
_field = "userName"; //要检索的字段
_json = {keyword:_keyword,table:_table,field:_field};
return _json;
}
</script>
HTML:
<body style="text-align: center">
<form id="form1" runat="server">
<table style="padding-top: 5px" cellpadding="0" cellspacing="0">
<tr>
<td style="height:5px"></td>
</tr>
<tr valign="top">
<td>
<input id="keyword" name="keyword" type="text" />
</td>
<td>
<input id="Button1" type="button" value="搜索" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="dvResult" style="text-align:left; height:100px; overflow:auto;">
</div>
</td>
</tr>
</table>
</form>
</body>
/*******************后台处理逻辑***************************/
public class AutoComplete : IHttpHandler
{
public AutoComplete()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (context.Request.Params["keyword"] != null && context.Request.Params["table"] != null && context.Request.Params["field"] != null)
{
string keywordTemp=context.Request.Params["keyword"].ToString();
string tableTemp=context.Request.Params["table"].ToString();
string fieldTemp=context.Request.Params["field"].ToString();
string returnStr = "";
returnStr = AutoCompleteGetResult.GetResult(keywordTemp, tableTemp, fieldTemp);
context.Response.Clear();
context.Response.Write(returnStr);
context.Response.End();
}
else
{
context.Response.Clear();
context.Response.Write("自动提示无法启动");
context.Response.End();
}
}
public bool IsReusable
{
get
{
return true;
}
}
}
public class AutoCompleteGetResult
{
public AutoCompleteGetResult()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
public static string GetResult(string keyword, string tableName, string field)
{
string[] key = keyword.Split(' ');
StringBuilder sql = new StringBuilder();
sql.Append("SELECT " + field + " FROM " + tableName + " where 1=1");
for (int i = 0; i < key.Length; i++)
{
sql.Append(" and " + field + " like '%" + key[i] + "%'");
}
DataTable dt = DBClass.ExecuteDataSet(sql.ToString()).Tables[0];
string returnStr = "";
try
{
for (int i = 0; i < dt.Rows.Count; i++)
{
returnStr += Convert.ToString(dt.Rows[i][field]) + ";";
}
}
catch { }
return returnStr;
}
}
用jQuery的ajax的功能实现输入自动提示的功能的更多相关文章
- jquery 实现邮箱输入自动提示功能:(二)
上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...
- jquery 实现邮箱输入自动提示功能:(一)
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...
- [转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法 方法1:使用ajaxStart方法定义一个全局的“加 ...
- jquery 实现邮箱输入自动提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- jquery的ajax提交时“加载中”提示的处理方法
方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){ $("#loading").ajaxStart(function(){ ...
- AngularJS 实现的输入自动完成补充功能
1.首先需要引入:angucomplete.js第三方库 2.增加model : var app = angular.module('app', ["angucomplete"]) ...
- 使用idea Live Template实现eclipse syso自动提示代码功能
转载:http://blog.sina.com.cn/s/blog_4c4195e70102wh7e.html 具体步骤: 1.点击File-->Setting-->Live Templa ...
- Nginx服务rewrite模块功能说明 网站自动跳转功能
实现域名地址信息跳转,用于做伪静态地址 www.impkk.com/oldboy?edu.html 动态地址 www.impkk.com/oldboy-edu.html 伪静态地址 rewrite ^ ...
随机推荐
- Struts2+Spring+Hibernate step by step 11 ssh拦截验证用户登录到集成
注意:该系列文章从教师王健写了一部分ssh集成开发指南 引言: 之前没有引入拦截器之前,我们使用Filter过滤器验证用户是否登录,在使用struts2之后,全然能够使用拦截器,验证用户是否已经登录, ...
- 王立平--result += "{";
result += "{"; 等于:result=result+"{" 字符串连接 x+=1====x=x+1 版权声明:本文博客原创文章,博客,未经同意,不得 ...
- Ajax实践之用户是否存在
关于Ajax在之前的学习中,已经对它的基础知识有了初步的了解.仅仅是欠实践. 那么接下来就让实践来检验一下真理吧! 基础见:http://blog.csdn.net/liu_yujie2011com/ ...
- 解决Activity启动黑屏和设置android:windowIsTranslucent不兼容activity切换动画的问题
在该项目中遇到开Activity之后,黑屏问题,解决的办法是在网上通过设置发现theme和style特性,可以实现. http://www.cnblogs.com/sunzn/p/3407078.ht ...
- 实现 mouse-drag 的图标拖动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 网络资源(2) - Maven视频
2014_08_23 http://v.youku.com/v_show/id_XNDE2NzM0Nzk2.html Maven最佳实践,公司真实环境实践-私服最佳实践 2014_08_24 http ...
- GPS坐标互转:WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)[转]
WGS-84:是国际标准,GPS坐标(Google Earth使用.或者GPS模块)GCJ-02:中国坐标偏移标准,Google Map.高德.腾讯使用BD-09:百度坐标偏移标准,Baidu Map ...
- Linux入门介绍
Linux入门介绍 一.Linux 初步介绍 Linux的优点 免费的,开源的 支持多线程,多用户 安全性好 对内存和文件管理优越 系统稳定 消耗资源少 Linux的缺点 操作相对困难 一些专业软件以 ...
- HDU 1598 find the most comfortable road (最小生成树) >>
Problem Description XX明星有许多城市,通过与一个陌生的城市高速公路SARS(Super Air Roam Structure---超级空中漫游结构)进行交流.每条SARS都对行驶 ...
- JBPM——MyEclipse开发环境的搭建
第一次接触JBPM我不知道如何在工程中的应用.查了一些资料.大约在JBPM随着时代的发展有一定的了解.首先JBPM它是JBoss件平台的一个组成部分.是一个灵活的,易扩展的工作流管理系统,仅仅只是这个 ...