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. [设计模式]<<设计模式之禅>>抽象工厂模式

    1 女娲的失误 上一篇讲了女娲造人的故事.人是造出来了,世界也热闹了,可是低头一看,都是清一色的类型,缺少关爱.仇恨.喜怒哀乐等情绪,人类的生命太平淡了,女娲一想,猛然一拍 脑袋,忘记给人类定义性别了 ...

  2. [BigData]关于Hadoop学习笔记第三天(PPT总结)(一)

     课程安排 MapReduce原理*** MapReduce执行过程** 数据类型与格式*** Writable接口与序列化机制*** ---------------------------加深拓展- ...

  3. 关于Java中的构造方法和set方法()给属性赋值

    对于一个类中的成员变量(属性),属性如果都设置成了private类型,那么对外给属性设置了get和set方法 , 那么外部程序中给这些属性设置值,有两种方式. 第一种就是通过set()方法. 第二种就 ...

  4. 利用jQuery实现选项卡

    /*Tab 选项卡 标签*/ $(function(){ var $div_li =$("div.tab_menu ul li"); $div_li.click(function( ...

  5. 整合Spring与Hibernate

    在学习spring的时候,要整合hibernate,本来是看起来挺简单的,但是遇到的远要比想到了多,而且多很多,期间几天一个bug实在难调,几度放弃,但终究柳暗花明,抑制不住喜悦就想着分享一下成果吧. ...

  6. Ajax-Demo

    index.jsp 1 <%@ page language="java" contentType="text/html; charset=UTF-8" p ...

  7. 机器学习 —— 决策树及其集成算法(Bagging、随机森林、Boosting)

    本文为senlie原创,转载请保留此地址:http://www.cnblogs.com/senlie/ 决策树--------------------------------------------- ...

  8. Windows下bmp文件格式

    6.1 BMP文件格式 6.1.1 简介 位图文件(Bitmap-File,BMP)格式是Windows采用的图像文件存储格式,在Windows环境下运行的所有图像处理软件都支持这种格式.Window ...

  9. wp8 自定义相机+nokia滤镜+录制amr音频

    demo截图:      代码量有点多,就不贴出来了. 备注: 1.自定义相机主要横竖屏时,对相机进行旋转. 2.播放amr格式可以在页面中直接添加MediaElement控件进行播放,或者使用Bac ...

  10. kali使用随笔

    1.kali 默认禁用网络服务,显示设备未托管.需要在/etc/NetworkManager/NetworkManager.conf将managed=false修改为true,重启电脑. 2.自己利用 ...