jQuery UI AutoComplete 自动完成使用小记

页面:


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="web_Test" %>
<!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>测试</title>
<link type="text/css" rel="stylesheet" />
<link href="../css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- 解决下拉列表框被遮盖 jquery.bgiframe -->
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.bgiframe-2.1.1.js"></script>
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.mouse.js"></script>
<!-- jquery.ui.autocomplete -->
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.autocomplete.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#txtTest").autocomplete({
minLength:1,
source: function(request, response) {
$.ajax({
url: "../ajax/GetAllWords.ashx",
dataType: "json",
data: request,
success: function( data ) {
response( data );
}
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="txtTest" type="text" />
</div>
</form>
</body>
</html>

后台:


代码如下:

<%@ WebHandler Language="C#" Class="GetAllWords" %>
using System;
using System.Web;
public class GetAllWords : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (context.Request.QueryString["term"] != null && context.Request.QueryString["term"] != "")
{
context.Response.Clear();
context.Response.Charset = "utf-8";
context.Response.Buffer = true;
context.Response.ContentEncoding = System.Text.Encoding.UTF8;
context.Response.ContentType = "text/plain";
context.Response.Write(GetLikeUserName(context.Request.QueryString["term"]));
context.Response.Flush();
context.Response.Close();
context.Response.End();
}
}
/// <summary>
/// 拼接json
/// </summary>
/// <param name="key">关键词</param>
/// <returns></returns>
private String GetLikeUserName(string key)
{
jhg.BLL.web_wordManager wordManager = new jhg.BLL.web_wordManager();
//搜索,返回10个关键词
string[] listWord = wordManager.GetSearchWord(key, 10);
System.Text.StringBuilder sbstr = new System.Text.StringBuilder("[");
int ct = listWord.Length;
for (int i = 0; i < ct; i++)
{
sbstr.Append("\"" + listWord[i] + "\"");
if (i == ct - 1)
sbstr.Append("]");
else
sbstr.Append(",");
}
return sbstr.ToString();
}
public bool IsReusable
{
get
{
return false;
}
}
}

注:
文件:jquery.ui.autocomplete.css
.ui-autocomplete { position: absolute; cursor: default; }
去掉: position: absolute;
效果图:

赞 (0)

相关推荐

  • jQuery autocomplete插件修改

    jQuery autocomplete插件修改

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

  • jQuery UI Autocomplete 体验分享

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: 复制代码 代码如下: ["cnblogs","博客园","囧月"] 对于JSON格式的Array,则要求有:label.value属性,如下: 复制代码 代码如下: [{label: "博客园", value: "cnblogs"}, {label: &qu

  • JQuery autocomplete 使用手册

    官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete 当前版本:1.1 需要JQuery版本:1.2.6+ 首先是最重要的方法 autocomplete( url or data, [options] ) 第一个参数可以是数组或者url.options参数比较复杂: * minChars (Number): 在触发autoComplete前用户至少需要输入的字符数.Default: 1,如果设为0,在输入框内双击

  • jQuery Autocomplete简介_动力节点Java学院整理

    jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大.最灵活的Autocomplete,它支持本地的Array/JSON数组.通过ajax请求的Array/JSON数组.JSONP.以及Function(最灵活)等方式来获取数据. 支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ["bjpowernode","动力节点"

  • 基于jquery的文本框与autocomplete结合使用(asp.net+json)

    JS脚本引用 复制代码 代码如下: <script src="/scripts/Jquery.autocomplete/jquery.autocomplete.js" type="text/javascript"></script> 样式引用 复制代码 代码如下: <style type="text/css" media="all"> @import url("/scripts/J

  • jQuery UI AutoComplete 使用说明

    介绍 在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete,这为我们提供了又一个强大的开发工具,这里介绍一下这个控件的使用方式. 首先,jQuery UI 是基于 jQuery 的,所以,必须在你的页面中首先引用 jQuery 脚本库,然后再引用 jQuery UI 库,对于 jQuery UI 库来说,可以引用整个的库,也可以仅仅引用当前页面用到的库. jQuery UI 的下载地址:http://jqueryui.com/download 一.基本配置 一般来说,

  • 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配置: <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script> <link rel="

  • jQuery.Autocomplete实现自动完成功能（详解）

    1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http://docs.jquery.com/Plugins/Autocomplete 2.jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) m

  • jQuery UI AutoComplete 自动完成使用小记

    jQuery UI AutoComplete 自动完成使用小记

    页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="web_Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

  • jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

    最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现. 因为我是WEB前端小白,遇到一个问题很久也没解决掉,所以特简单记录一下,供以后查阅. 问题:不使用模态窗的时候,autocomplete可以很好的工作,使用模态窗时弹出的选择菜单会被模态窗遮挡. 解决过程: 首先查到的解决办法是在*autocomplete.css中找到.ui-autocomplete伪类,添

  • firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法

    找到以下代码: 复制代码 代码如下: .bind( "blur.autocomplete", function( event ) {                if ( self.options.disabled ) {                    return;                } clearTimeout( self.searching );                // clicks on the menu (or a button to tri

  • 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 UI Autocomplete 1.8.16 中文输入修正代码

    找到如下代码 复制代码 代码如下: }).bind("blur.autocomplete", function (c) { if (!a.options.disabled) { clearTimeout(a.searching); a.closing = setTimeout(function () { a.close(c); a._change(c) }, 150) } }) 改为 复制代码 代码如下: }).bind("blur.autocomplete", f

  • jquery UI实现autocomplete在获取焦点时得到显示列表功能示例

    本文实例讲述了jquery UI实现autocomplete在获取焦点时得到显示列表功能.分享给大家供大家参考,具体如下: 在做项目的时候,客户有这样的需求,将以前输入过的内容,在某个文本框上用列表的形式提示出来,可以选择,换言之,就如同我们用谷歌搜索,或者百度搜索一样,输入一些关键词,会自动提示,这个功能就叫autocomplete. 当然在 jquery  UI  下有 插件,具体下载的地方,搜索就知道了.重点是,我现在的用法,是需要在文本框获取焦点的时候,就弹出待选择的列表.而传统的是必须

  • JQuery搜索框自动补全(模糊匹配)功能实现示例

    JQuery搜索框自动补全(模糊匹配)功能实现示例

    本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考 首先贴出的是JQuery Ui 的自动补全插件部分的代码,后面的功能都是在其基础上追加的,直接拷贝到你的本地就可以直观的看到运行效果,也可以到官网上面体验和查看,为了方便,我这里是直接引入的JS链接点击下载JQuery UI的源码 <!doctype html> <html lang="en"> <

  • jQuery UI 实现email输入提示实例

    jQuery UI 实现email输入提示实例

    效果:   复制代码 代码如下: 使用了Jquery UI ,要导入的js和css: <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <link rel="stylesheet" href="../demos.css"> <script src="../../jquery-1.7.2.js"&

随机推荐