autocomplete.js的使用(1):自动输入时,出现下拉选择框
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):自动输入时,出现下拉选择框的更多相关文章
- autocomplete.js的使用(2):自动输入时,出现下拉选择框
<!--自动输入文本值所需的jquery文件--><script src="/js/jquery-1.8.3.min.js" type="text/Ja ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- 原生js实现一个自定义下拉单选选择框
浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...
- jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
- js实现文本框或文本域在用户输入时(oninput)触发事件,操作元素
写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为0.5.当有内容输入时(并不是获得焦点时focus),‘下一步’按钮状态可用, 且透明度为1. <s ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件
支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...
- jquery autocomplete实现读取sql数据库自动补全TextBox
转自我本良人 原文 jquery autocomplete实现读取sql数据库自动补全TextBox 项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页 ...
- jquery.autocomplete.js 插件的自定义搜索规则
这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...
- Jquery autocomplete.js输入框联想补全功能
Jquery autocomplete.js插件下载地址:http://files.cnblogs.com/files/jinzhiming/autocomplete.rar 有两种用法,一种是直接使 ...
随机推荐
- TL-WR703 USB不稳定/当前的总结
http://see.sl088.com/wiki/WR703_USB%E4%B8%8D%E7%A8%B3%E5%AE%9A/%E5%BD%93%E5%89%8D%E7%9A%84%E6%80%BB% ...
- JavaScript代码优化(下载时间和执行速度优化)
JavaScript代码的速度被分成两部分:下载时间和执行速度. 下载时间 Web浏览器下载的是js源码,因此所有长变量名和注释都回包含在内.这个因素会增加下载时间.1160是一个TCP-IP包中的字 ...
- script的defer和async
我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...
- java 图的邻接矩阵
有向图 在有向图中,结点对<x ,y>是有序的,结点对<x,y>称为从结点x到结点y的一条有向边,因此,<x,y>与<y,x>是两条不同的边.有向图中的 ...
- EF 预热
由于EF第一次加载比较慢,所以要对EF进行一次初始化的加载,类似第一次打开网页很慢,但第二次打开都很快了的原理一样:第一次把所有静态的图片和JS缓存到本地了:当第二次打开的时候都不需要再去下载这些东西 ...
- 项目源码--Android视频MV类网站客户端
下载源码 技术要点: 1.视频MV类网站客户端框架 2.底部TAB功能模块 3.用户管理模块 4.结合优质动画技术,良好的用户体验 5.用户设置模块 6.sqlite数据库灵活的应用 7.源码带有非常 ...
- Golang学习 - io 包
------------------------------------------------------------ 先说一下接口,Go 语言中的接口很简单,在 Go 语言的 io 包中有这样一个 ...
- GNU-ARM汇编
GNU ARM 汇编指令(2008-10-29 00:16:10) 标签:linux gnu arm 汇编指令 it 分类:技术文摘 第一部分 Linux下ARM汇编语法尽管在Linux下使用C或C+ ...
- html、css、js的命名规范
最佳原则 坚持制定好的代码规范. 无论团队人数多少,代码应该同出一门. 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规则: 有复数结构时,要 ...
- Dockerfile 指令
FROM 格式为 FROM <image>或FROM <image>:<tag> 第一条指令必须为 FROM 指令.并且,如果在同一个Dockerfile中创建多个 ...