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. [改善Java代码]提防包装类型的null值

    建议26: 提防包装类型的null值 我们知道Java引入包装类型(Wrapper Types)是为了解决基本类型的实例化问题,以便让一个基本类型也能参与到面向对象的编程世界中.而在Java 5中泛型 ...

  2. MSP430常见问题之FLASH存储类

    Q1:用IAR Embedded Workbench for MSP430 通过JTAG往MSP430上写程序.为了知道片内程序的版本,必须读出Flash 中内容.什么工具软件可以通过JTAG口实现这 ...

  3. MSP430常见问题之复位系统类

    Q1:请问msp430 怎么手动复位啊?是不是连到RST/NMI 上?但是这个脚不是和JTAG 连吗?我看到一些资料上说复位的话还要上拉电阻或者复位电路.A1:JTAG 功能只在下载程序时候使用,正常 ...

  4. Quartz Scheduler(2.2.1) - Working with JobStores

    About Job Stores JobStores are responsible for keeping track of all the work data you give to the sc ...

  5. windows server 2008下装SQL 2008R2x64

    1. 在windows server 2008下装SQL 2008出现 This SQL Server Setup media is not supported on a X64 system 使用虚 ...

  6. stl中的map数据类型

    1.1 STL map 1.1.1 背景 关联容器使用键(key)来存储访问读取元素,而顺序容器则通过元素在容器中的位置存储和访问元素. 常见的顺序容器有:vector.list.deque.stac ...

  7. Ant 命令总结

    1 Ant是什么? Apache Ant 是一个基于 Java的生成工具.生成工具在软件开发中用来将源代码和其他输入文件转换为可执行文件的形式(也有可能转换为可安装的产品映像形式).随着应用程序的生成 ...

  8. 使用JS调用WebService接口

    <script> $(document).ready(function () { var username = "admin"; var password = &quo ...

  9. OC10_文件练习

    // // TextHander.h // OC10_文件练习 // // Created by zhangxueming on 15/6/19. // Copyright (c) 2015年 zha ...

  10. bzoj1018:[SHOI2008]堵塞的交通traffic

    思路:线段树好题,用线段树维护连通性. 区间[l,r]表示左端点为l,右端点为r,宽度为2的矩形,那么线段树区间维护的就是该区间内的四个角的连通情况,注意是该区间内的连通情况,也就是说只能通过该区间内 ...