小试JQuery的AutoComplete插件

前台代码如下：


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery的自动完成功能</title>
<script src="jquery.autocomplete/jquery-autocomplete/lib/jquery.js" type="text/javascript"></script>
<script src="jquery.autocomplete/jquery-autocomplete/jquery.autocomplete.min.js" type="text/javascript"></script>
<link href="jquery.autocomplete/jquery-autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="jquery.autocomplete/jquery-autocomplete/demo/localdata.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
raiseEvent();
});
//请求完成，被回调的函数
function rServer(arg, context) {
eval(arg);
$("#sugest").focus().autocomplete(data);
}
//向服务器端发起数据处理请求
function raiseEvent(arg, context)
{
<%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" name="text" id="sugest" style="width:200px" />
</div>
</form>
</body>
</html>

然后就是后台代码，当然了，这里只是模拟数据：


代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
public partial class _Default : System.Web.UI.Page,ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
private StringBuilder GenStr()
{
StringBuilder sbStr = new StringBuilder();
sbStr.Append("var data = ");
sbStr.Append("[");
sbStr.Append("\"Aback\",");
sbStr.Append("\"back\",");
sbStr.Append("\"cback\",");
sbStr.Append("\"english\",");
sbStr.Append("\"confidence\",");
sbStr.Append("\"diligent\",");
sbStr.Append("\"honor\",");
sbStr.Append("\"delicious\"");
sbStr.Append("];");
return sbStr;
}
public string GetCallbackResult()
{
return GenStr().ToString();
}
public void RaiseCallbackEvent(string eventArgument)
{
}
}

赞 (0)

相关推荐

  • jquery autocomplete自动完成插件的的使用方法

    首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css. 由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下. 前台代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComple

  • PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息.本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现出来供用户选择,提升了用户体验. 本文将使用jquery ui的autocomplete插件,结合后端PHP,数据源通过PHP读取mysql数据表的数据. XHTML 首先将jquery库和相关ui插件,以及css导入. 复制代码 代码如下: <link rel="stylesheet&quo

  • jQuery Autocomplete自动完成插件

    相对于同类插件,他的特色有3点. 1.可缓存查询结果 (二次查询速度快) 2.非keyup监听方式 (解决某些系统/情况下无法触发keyxxx事件的问题) 3.简洁的参数 (好看?) 插件性能尚好,我的E6500.2G内存,30秒内一共发生了4469次调用,耗时94.65毫秒:百度的是2432次调用,80.24毫秒. 接近1倍的调用是jQuery中的问题,但具体原因我还没弄明白,如果那位兄弟知道的还请不吝赐教. 调用方法 复制代码 代码如下: jQuery("#kw").suggest

  • jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解

    本文实例讲述了jQuery autoComplete插件两种使用方式及动态改变参数值的方法.分享给大家供大家参考,具体如下: 一.一次加载.多次使用: 前端JS代码: /*客户名称自动匹配*/ function customerAutoComplete(){ $.ajax({ type:"GET", url:encodeURI("/approvalajax/salesOrderApproval_findCustomerList"), dataType:"j

  • 修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交

    但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配:而在我的IE6.0下,则无此问题. 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过"keydown"事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发"keydown"的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的:但在firef

  • jquery插件autocomplete用法示例

    本文实例讲述了jquery插件autocomplete用法.分享给大家供大家参考,具体如下: (1)引入js和样式 <script type="text/JavaScript" src="../js/jQuery-1.8.0.js" charset="utf-8"></script> <script type="text/javascript" src="../js/jquery.aut

  • jquery自动完成插件(autocomplete)应用之PHP版

    于工作中需要用到自动提示这个功能,呵呵,自己又是js小菜,于是百度了一下,找到一个用jquery与其插件autocomplete开发的.net版的自动完成功能,于是down下来了改成了php版的,并加了支持向上/向下选择文字等功能,放上来共享一下,纯体力活... :) 1.下载jquery库,网址:http://jquery.com/ : 2.下载jquery autocomplete插件或者直接使用我附件里提供的文件,自己下载下来的文件需要修改一些内容才能支持向上/向下选择文字.解决中文乱码,

  • jQuery autocomplete插件修改

    jQuery autocomplete插件修改

    主要修改了两个地方: 一.上下选择与输入值同步问题. 输入关键字后,当出现了下拉选项,用键盘的上下键选择时,关键字输入框的值,没有与你选择的值同步.插件是老外写的,可能他没有考虑到这一点. 二.修正了在firefox下中文输入,没有激活自动提交的问题. 老外当然不会用到中文输入,这个bug存在也理所当然了. 另:附件里的实现了选择后自动提交,也就和google.百度的效果完全一样了. 下载地址

  • jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果.1. 创建 AjaxPage.aspx 页面,在其中定义 WebMethod 方法来返回 搜索页面需要的输入框所有提示条目. 后台代码如下: 复制代码 代码如下: using System.Coll

  • 小试JQuery的AutoComplete插件

    前台代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

  • Jquery的autocomplete插件用法及参数讲解

    var emails = [ { name: "Peter Pan", to: "peter@pan.de" }, { name: "Molly", to: "molly@yahoo.com" }, { name: "Forneria Marconi", to: "live@japan.jp" }, { name: "Master <em>Sync</em&g

  • 精心收集的jQuery常用的插件1000

    精心收集的jQuery常用的插件1000

    1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery 热点图书:www.hotbook.cn jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion. jQuery-Horizontal Accordion jQuery plugin: Accordion 用于创建 折叠菜单的jQuery插件. jQuery plugin: Accordion 热

  • 使用JQuery自动完成插件Auto Complete详解

    问题 当你查找一些特殊的东西,当你输入准确的词时,找到它可能是困难的(或者很耗时).在输入的时候展示出结果(自动完成),使查找变得更简单. 解决方案 使用JQuery自动完成插件,更新现有图书列表页面上的搜索,当用户键入的时候立即显示结果. 讨论 自动完成插件是不会象jQuery基本库一样自动包含在MVC项目中的,所以需要做的第一件事就是的是下载插件 访问http://jquery.com/.两个主要的文件是必需的:JavaScript文件和CSS文件.把新下载的javascript文件放到你M

  • jQuery结合jQuery.cookie.js插件实现换肤功能示例

    本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能.分享给大家供大家参考,具体如下: 上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧. jQuery.cookie.js下载:https://github.com/carhartl/jquery-cookie/ 先来了解下cookie.js如何使用. 先导入: <script type="text/javascript&qu

  • jquery动态导航插件dynamicNav用法实例分析

    jquery动态导航插件dynamicNav用法实例分析

    本文实例讲述了jquery动态导航插件dynamicNav用法.分享给大家供大家参考.具体如下: 这是一款自己写的jquery动态导航插件-dynamicNav,具体思路是: 第一.给所有的li里插入一个span标签,且包含li里面的a标签 第二.复制一份a标签,插入到span里,现在span里有两个a标签 第三.根据传入的参数判断是垂直切换还是水平的,如果是垂直的,将span的宽度改为一个a标签的宽度,这时两个a标签就垂直排列了,这里一定要将li的overflow:hidden;否则会看到2个

随机推荐