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 有两种用法,一种是直接使 ...
随机推荐
- MFC中修改静态文本框中文字的字体、颜色
假设有一个静态文本框控件,其ID为:IDC_STATIC_XSDJ,且关联一个control类的CStatic类型的变量m_static_xsdj. 设置字体时自然要用到CFont类,下面介绍两种方法 ...
- cocos2d-x 用浏览器打开网页
转自:http://www.xuebuyuan.com/1396292.html,http://www.cocoachina.com/bbs/read.php?tid=88589 First!! 源代 ...
- 用java发送邮件(黄海已测试通过)
/** * java发送带附件的邮件 * 周枫 * 2013.8.10 */ package com.dsideal.Util; import javax.mail.*; import javax.m ...
- C# 反射类型转换
/// <summary> /// 泛型类型转换 /// </summary> /// <typeparam name="T">要转换的基础类型 ...
- Codeforces Round #340 (Div. 2) E. XOR and Favorite Number 莫队算法
E. XOR and Favorite Number 题目连接: http://www.codeforces.com/contest/617/problem/E Descriptionww.co Bo ...
- Gym 100531H Problem H. Hiking in the Hills 二分
Problem H. Hiking in the Hills 题目连接: http://codeforces.com/gym/100531/attachments Description Helen ...
- Codeforces Round #335 (Div. 2) B. Testing Robots 水题
B. Testing Robots Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/contest/606 ...
- YouTube上的版权保护
早在2007年的时候,我曾写过一篇名为“YouTube: The Big Copyright Lie”(YouTube:关于版权的弥天大谎)的文章,表达了我对YouTube又爱又恨的情感纠结: 现在回 ...
- linux C 9*9
#include<stdio.h> #include<conio.h> #include <windows.h> void Gotoxy(int x, int y) ...
- ecmall widgets 挂件开发详解
Ecmall挂件开发 实质上是后台开发很多页面,分别去调用程序展示这些页面,达到首页内容更换很快的目的,这样做减少后续开发,开发人员只需开发挂件就可以了,至于位置可随意定.(还需调整html,但是起码 ...