您的位置:首页 > Web前端 > JavaScript

JavaScript实现在textbox输入时自动去数据库匹配并找出类似值列出,选择后记得将值填入本textbox及下一个textbox

2014-07-08 10:39 615 查看
1.

<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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐