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. windows7下实现局域网内文件共享

    1.右击桌面网络----属性----更改高级共享设置 (注释:查看当前网络 比如:家庭网络.公共网络 等!) "我这里为公共网络" 2.选择 公共网络---选择以下选项:启动网络发 ...

  2. Java多线程技术学习笔记(二)

    目录: 线程间的通信示例 等待唤醒机制 等待唤醒机制的优化 线程间通信经典问题:多生产者多消费者问题 多生产多消费问题的解决 JDK1.5之后的新加锁方式 多生产多消费问题的新解决办法 sleep和w ...

  3. C++学习笔记之迭代器

    模板是的算法独立于存储的数据类型,而迭代器使算法独立于使用的容器类型.理解迭代器是理解STL的关键. 迭代器应该具备的特征: (1)应该能够对迭代器进行解除引用的操作,以便能够访问它引用的值.即如果P ...

  4. Codeforces Good Bye 2015 A. New Year and Days 水题

    A. New Year and Days 题目连接: http://www.codeforces.com/contest/611/problem/A Description Today is Wedn ...

  5. 如何从iTunes Connect中提款呢?

    最近在AppStore有点小小小收入,但如何从iTunes Connect中提款呢? (Payments and Financial Reports) 网上查了下,发现有种说法:“只要账号余额达到15 ...

  6. ORA-01489: result of string concatenation is too long

    ORA-01489: result of string concatenation is too long Cause: String concatenation result is more tha ...

  7. XianBicycle

    https://github.com/xialinchong/secrettalkandroid https://github.com/talentprince/PhotoView https://g ...

  8. MySQL优化---DBA对MySQL优化的一些总结

      非原创, 来自梦嘉朋友, 非常好的总结, 一起学习. ------------------------------------------------- 1. 要确保有足够的内存数据库能够高效的运 ...

  9. Debian中编译内核

    转载: http://blog.163.com/libo_5/blog/static/156968520101016102051580/ http://hi.baidu.com/wg_wang/ite ...

  10. 关于Android LayoutInflater的解释

    LayoutInflater的作用就是动态加载xml布局好的界面,类似于findViewById()来获取已经定义好的控件一样.不同点是LayoutInflater是用来找res/layout/下的x ...