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 有两种用法,一种是直接使 ...
随机推荐
- 快递查询API接口(trackingmore)
快递查询接口 目前提供快递查询的接口平台有: Trackingmore 快递100 快递网 不同接口的区别: (1)Trackingmore支持380家快递公司,其中有55家为国内的快递,其余325家 ...
- Thread Pool Engine, and Work-Stealing scheduling algorithm
http://pages.videotron.com/aminer/threadpool.htm http://pages.videotron.com/aminer/zip/threadpool.zi ...
- Swift学习笔记八
函数 Swift的函数语法非常独特,也提供了很高的灵活性和可读性.它可以充分表达从简单的无参数C风格函数到复杂的拥有局部变量和外部变量的OC风格的方法.参数可以有默认值,方便函数的调用.Swift中的 ...
- Android开发代码混淆经验(Eclipse)
为了防止自己的劳动成果被别人窃取,混淆代码能有效防止被反编译,下面来总结以下混淆代码的步骤: 2.编辑项目下的proguard-project.txt,添加不需要混淆的规则(model.泛型.反射.第 ...
- Android简单封装类似JQuery异步请求
在android开发中经常会使用异步请求数据,通常会使用handler或者AsyncTask去做,handler 配合message 使用起来比较麻烦,AsyncTask 线程池只允许128个线程工作 ...
- ACM-最短路(SPFA,Dijkstra,Floyd)之最短路——hdu2544
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
- oc-32-@property示例
Goods.h #import <Foundation/Foundation.h> typedef struct{ int year; int month; int day; } MyDa ...
- 下一个系列学习列表Spring.net+NHibernate+MVC
开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo 刘冬.NET 2011-08-19 ...
- 如何快速掌握CSS(各种CSS工具)
CSS中的大量属性难以记忆,通过组合多种CSS工具,可以快速学习常见样式,并提高设计效率.这里给大家推荐一些比较好的在线工具,通过所见即所得图形化界面设计样式,直接得到对应的CSS代码.相比臃肿的集成 ...
- Load Balancing 折半枚举大法好啊
Load Balancing 给出每个学生的学分. 将学生按学分分成四组,使得sigma (sumi-n/4)最小. 算法: 折半枚举 #include <iostrea ...