JavaScript实现在textbox输入时自动去数据库匹配并找出类似值列出,选择后记得将值填入本textbox及下一个textbox
2014-07-08 10:39
615 查看
1.
2.新建一个Generic Handler文件
3.重写jquery.autocomplete.js的selectCurrent方法
<script src='<%= Application["rootURL"] %>JS/jquery-1.4.1.min.js' type="text/javascript"></script> <script src='<%= Application["rootURL"] %>JS/jquery.cookie.js' type="text/javascript"></script> <script src='<%= Application["rootURL"] %>JS/jquery.autocomplete.js' type="text/javascript"></script> <link rel="Stylesheet" href='<%= Application["rootURL"] %>JS/jquery.autocomplete.css' type="text/css"/> <script language="javascript" type="text/javascript"> var txtText7 = "#" + '<%= new DynamicControl(this, "Text7").ClientID%>'; var url1 = '<%= Application["rootURL"] %>文件夹名/文件名.ashx'; $(function () { $(txtText7).autocomplete(url1); }); </script>
2.新建一个Generic Handler文件
using System; using System.Collections; using System.Data; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Data.Common; using System.Diagnostics; namespace 文件夹名{ /// <summary> /// Summary description for 文件名 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class 文件名 : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; if (!Sql.IsEmptyString(context.Request.QueryString["q"])) { DataTable result = new DataTable(); string qName = context.Request.QueryString["q"].Trim(); if (!String.IsNullOrEmpty(qName)) { result = GetCityName(qName, 10); } else { return; } foreach (DataRow row in result.Rows) { context.Response.Write(row["NAME"] + "\n"); } } context.Response.End(); } public static DataTable GetCityName(string sPrefix, int count) { DataTable dt = new DataTable(); DbProviderFactory dbf = DbProviderFactories.GetFactory(); using (IDbConnection con = dbf.CreateConnection()) { string sSQL; sSQL = "select top {0} CityName+' ('+StateName+')' AS NAME " + ControlChars.CrLf + " from USA_State_City " + ControlChars.CrLf + " where CityName like @NAME " + ControlChars.CrLf + " order by CityName asc " + ControlChars.CrLf; using (IDbCommand cmd = con.CreateCommand()) { cmd.CommandText = string.Format(sSQL, count); Sql.AddParameter(cmd, "@NAME", sPrefix + "%"); try { using (DbDataAdapter da = dbf.CreateDataAdapter()) { ((IDbDataAdapter)da).SelectCommand = cmd; da.Fill(dt); } } catch (Exception ex) { SplendidError.SystemError(new StackTrace(true).GetFrame(0), ex); return null; } } } return dt; } public bool IsReusable { get { return false; } } } }
3.重写jquery.autocomplete.js的selectCurrent方法
function selectCurrent() { var selected = select.selected(); if( !selected ) return false; var v = selected.result; previousValue = v; if ( options.multiple ) { var words = trimWords($input.val()); if ( words.length > 1 ) { var seperator = options.multipleSeparator.length; var cursorAt = $(input).selection().start; var wordAt, progress = 0; $.each(words, function(i, word) { progress += word.length; if (cursorAt <= progress) { wordAt = i; return false; } progress += seperator; }); words[wordAt] = v; v = words.join( options.multipleSeparator ); } v += options.multipleSeparator; } var vals = $input.val().split(","); var txtval=""; if (vals.length > 1) { for (k = 0; k < vals.length - 1; k++) { txtval += vals[k]+", "; } txtval += v; } else { txtval = v; } $input.val(txtval); hideResultsNow(); var iPos = selected.data.toString().indexOf("(") var sName= selected.data.toString().substring(0,iPos); var IDendwith = $input.attr("ID").substring($input.attr("ID").lastIndexOf("_")+1); if (IDendwith=="TEXT7") { $input.val(sName); var txtStateID=IDendwith+1; var lenth=selected.data.toString().length-1; var sState=selected.data.toString().substring(iPos+1,lenth); $input.parent().parent().next().children().children().val(sState); } else { $input.trigger("result", [selected.data, selected.value]); } return true; }
相关文章推荐
- WPF 之 实现TextBox输入文字后自动弹出数据(类似百度的输入框)
- 转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
- WPF实现TextBox输入文字后自动弹出数据(类似百度的输入框)
- 如何实现输入字母就可以查出数据库中以该字母匹配的中文实现自动补全功能
- javascript 实现类似百度联想输入,自动补全功能
- WPF 之 实现TextBox输入文字后自动弹出数据(类似百度的输入框)
- 以JSon来实现TextBox可选择可输入
- ASP.NET 2.0 TreeView中用JavaScript实现选择子接点CheckBox是自动选择上父节点(或者所有父节点)
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- 利用JavaScript实现类似Delphi中数据敏感控件DBTextBox!
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- 使用FlexBox和Json实现类似ComboBox(类似Google的输入提示和自动)功能-基于JQuery-ASP.NET
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- 利用JavaScript实现类似Delphi中数据敏感控件DBTextBox!
- ajaxpro实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- JS实现输入信息自动匹配功能
- Autocomplete Textbox Example javascript实现自动完成成功
- [导入]Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- Flex中如何实现类似像QQ登录框中那种“记住密码”、“自动登录”功能,还有如何实现文本框中记录最后一次输入的值?