1、引入脚本库:
    <script type="text/javascript"
src="/Jscripts/jquery-1.3.2.js"></script>

<script src="/Jscripts/jquery.autocomplete.js"
type="text/javascript"></script>

2、在Demo.aspx页面中加入如下脚本:
       
$(document).ready(function() {
           
$.ajax({
               
type: "POST",
               
contentType: "application/json",
               
url: "Demo.aspx/GetDataBind",
               
data: "{}",
               
dataType: "json",
               
success: function(msg) {
                   
var datas = eval_r('(' + msg.d + ')');
                   
$("#txtName").autocomplete(datas,
{
                       
max: 12,
                       
minChars: 0,
                       
width: 140,
                       
scrollHeight: 300,
                       
matchContains: true,
                       
autoFill: false, //自动填充
                       
formatItem: function(row, i, max, value) {
                           
return row.Key;
                       
},
                       
formatMatch: function(row, i, max, value) {
                           
return row.Key;
                       
},
                       
formatResult: function(row) {
                           
return row.Key;
                       
}
                   
}).result(function(event, row, formatted) {
                       
$("#hidID").val(row.Value);
                   
});
               
}
           
});
       
});
3、页面中需要提供txtName、hidID控件:
    <asp:TextBox ID="txtName"
runat="server"></asp:TextBox>

<asp:HiddenField ID="hidID" runat="server"
/>
   
4、Demo.aspx.cs后台代码:

[WebMethod]
       
public static string GetDataBind()
       
{
           
Dictionary data = new Dictionary();

IList userinfos = GetByName();
           
if (userinfos != null)
           
{
               
foreach (Employee e in userinfos)
               
{
                   
data.Add(e.cName + "-" + e.eName, e.Empno);
               
}
           
}
           
DataContractJsonSerializer serializer = new
DataContractJsonSerializer(data.GetType());
           
using (MemoryStream ms = new MemoryStream())
           
{
               
serializer.WriteObject(ms, data);
               
return System.Text.Encoding.UTF8.GetString(ms.ToArray());
           
}
       
}

Jquery实现自动提示下拉框的更多相关文章

  1. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  2. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  3. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  4. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  5. JQuery 插件之Ajax Autocomplete(ajax自动完成)搜索引擎自动显示下拉框

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  6. 自制jquery可编辑的下拉框

    昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox ...

  7. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  8. jquery easyui无法绑定下拉框内容

    最近在研究jquery easyui的DataGrid,发现DataGrid中的下拉框无法绑定值,找了很久也没发现是具体问题所在,最后还是同事帮忙搞定的.具体问题竟然是jquery easyui提供的 ...

  9. jQuery自定义多选下拉框

    项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如 ...

随机推荐

  1. 一个把List<String>转化为以","隔开的字符串的方法

    import java.util.ArrayList; import java.util.List; /** * 集合操作 * @author intrl * @date 2010-12-15 * @ ...

  2. 关于Java获取系统信息

    本文部分转载自: http://www.cnblogs.com/wuhenke/archive/2011/11/19/2255400.html 我总结的相关类似博客:http://www.cnblog ...

  3. iOS学习——iOS视频和推荐网站

    最近有人问有没有iOS学习的相关资料,就简单的把自己的知道的和资源共享一下: 个人感觉iOS开发人才饱和,培训泛滥,个人推荐后台升职空间大和web前端竞争小. [链接][Ronda收集整理]2014年 ...

  4. C# 微信扫码支付 回调页面

    .NET版 微信扫码支付,官方推荐使用[模式二] 一.微信扫码支付模式一: 1.回调页面:官方demo中example文件下的NativeNotifyPage.aspx 2.微信回调地址:http:/ ...

  5. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  6. css3学习笔记之多列

    CSS3 创建多列 column-count 属性指定了需要分割的列数. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!D ...

  7. 印象笔记无法同步问题解决 Unable to send HTTP request: 12029

    问题 今天突然发现本地软件不能访问网络. 包括: 印象笔记无法同步, 搜狗输入法无法登陆. 但其它上网正常. 思路及解决过程 因为chrome上网 ,qq上网均正常. 且同事可以正常使用. 推测是本地 ...

  8. Java中的栈:java.util.Stack类

    public class Stack<E>extends Vector<E>Stack 类表示后进先出(LIFO)的对象堆栈.它通过五个操作对类 Vector 进行了扩展 ,允 ...

  9. 如何Angularjs1.3在页面中输出带Html标记的文本

    基于安全考虑,Angularjs不允许用ng-bind或者{{}}的方法输出html文本. 在实际的应用中,比如信息管理系统,用在线编辑器编辑出来的文章都带有html标记,这种情况下可以用ng-bin ...

  10. DTcms会员中心添加新页面-会员投稿,获得所有文章并分页

    DAL.article.cs /// <summary> /// 自定义:获得查询分页数据 /// </summary> public DataSet GetList(int ...