autocomplete.js可以实现自动输入文本值,并出现下拉框

js引用:所需要的autocomplete文件需要在网站中自行下载。

    <!--自动输入文本值所需的jquery文件-->
<script src="../js/autocomplete/lib/jquery.js" type="text/javascript"></script>
<script src="../js/autocomplete/lib/jquery.bgiframe.min.js" type="text/javascript"></script>
<script src="../js/autocomplete/jquery.autocomplete.js" type="text/javascript"></script>
<link href="../js/autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="../js/autocomplete/lib/jquery.dimensions.js" type="text/javascript"></script>

Html语句:

<div>目的地:<asp:TextBox ID="TextBox_City" style="padding-left:5px;height:25px;width:550px;line-height:18px;font-size:12px;" runat="server"></asp:TextBox> </div>

js语句:可是实现多个的选择

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#TextBox_City").autocomplete("../GoldenPalmInsurance/Code/CountryName.ashx",{
minChars: , //最少输入字条
max: ,
autoFill: false, //是否选多个,用","分开
mustMatch: false, //是否全匹配, 如数据中没有此数据,将无法输入
matchContains: true, //是否全文搜索,否则只是前面作为标准
width: ,
multiple: true,
scrollHeight: //提示高度,溢出时显示滚动条
});
});
</script>
CountryName.ashx文件中程序如下:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
//取得TextBox的文字
string q = context.Request.QueryString["q"] == null ? "" : context.Request.QueryString["q"].ToString();
if (!string.IsNullOrEmpty(q))
{
//LINQ查询
using (QuDataDataContext Qucontext=new QuDataDataContext())
{
var Query = from a in Qucontext.countryinfos
where a.cname.Contains(q) || a.ename.Contains(q)
orderby a.ename
select a.cname+'/'+a.ename;
string json = "申根/schengen state" + Environment.NewLine + string.Join(Environment.NewLine, Query.ToArray());
//將查詢結果輸出
context.Response.Write(json);
}
} }

autocomplete.js的使用(1):自动输入时,出现下拉选择框的更多相关文章

  1. autocomplete.js的使用(2):自动输入时,出现下拉选择框

    <!--自动输入文本值所需的jquery文件--><script src="/js/jquery-1.8.3.min.js" type="text/Ja ...

  2. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  3. 原生js实现一个自定义下拉单选选择框

    浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...

  4. jQuery搜索框自动补全功能插件实现-autocomplete.js

    最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

  5. js实现文本框或文本域在用户输入时(oninput)触发事件,操作元素

    写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为0.5.当有内容输入时(并不是获得焦点时focus),‘下一步’按钮状态可用, 且透明度为1. <s ...

  6. jQuery UI Autocomplete是jQuery UI的自动完成组件

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...

  7. jquery autocomplete实现读取sql数据库自动补全TextBox

    转自我本良人 原文 jquery autocomplete实现读取sql数据库自动补全TextBox 项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页 ...

  8. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

  9. Jquery autocomplete.js输入框联想补全功能

    Jquery autocomplete.js插件下载地址:http://files.cnblogs.com/files/jinzhiming/autocomplete.rar 有两种用法,一种是直接使 ...

随机推荐

  1. ARM Compiler toolchain Compiler -- Supported ARM architectures

    --cpu=name This option enables code generation for the selected ARM processor or architecture. Synta ...

  2. IE6文字溢出BUG(多出来的猪问题)

    在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: HTML & ...

  3. vimrc常用配置项

    设置行号 set nu 设置自动缩进 set autoindent 设置tab占n个字符 set tabstop=n 设置以空格代替tab(因为有部分场合不允许使用tab) set expandtab ...

  4. jQuery 效果 - animate() 方法

    http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...

  5. 主函数 main WinMain _tmain _tWinMain 的区别

    main是C/C++的标准入口函数名 WinMain是windows API窗体程序的入口函数.(int WINAPI WinMain()) 中 WINAPI是__stdcall宏,在windef.h ...

  6. Golang学习 - unicode/utf16 包

    ------------------------------------------------------------ // IsSurrogate 判断 r 是否为代理区字符 // 两个代理区字符 ...

  7. 构建高性能服务(三)Java高性能缓冲设计 vs Disruptor vs LinkedBlockingQueue--转载

    原文地址:http://maoyidao.iteye.com/blog/1663193 一个仅仅部署在4台服务器上的服务,每秒向Database写入数据超过100万行数据,每分钟产生超过1G的数据.而 ...

  8. ARM指令系统

    转载自:http://cxb4224.blog.163.com/blog/static/191224151201110220325976/ ARM处理器的工作状态和工作模式 工作状态 ARM处理器一般 ...

  9. 关于Android(Java)创建匿名线程

    Java中创建匿名线程主要集中就三中方式:Thread,Runnable,Handler去实现,下面分别介绍之- 一.通过Thread来创建 new Thread() { public void ru ...

  10. C# 代码生成工具 Millennials

    Millennials 是一个可定制的 C# 代码生成工具,支持 MVC 和三层架构.ADO.NET.Nhibernate 和 LINQ. 项目主页:http://www.open-open.com/ ...