很久没写代码了，也很久不写技术文了，不知道该从何写起，本文将会有点乱，请见谅。
本文的内容是要实现一个类似ComboBox的功能，也可以说是类似Google的输入提示和自动完成，其实这样的文章网上也不少，只是在下愚笨，几乎没从众多中文文章中受益，倒是从一些E文文章里有不少的收益，最终实现了想要的效果，小庆祝一下……
上图就是最终的效果图，文章最后将会附上整个源码的下载。
本功能主要是借助FlexBox这个基于JQuery的开源项目：
FlexBox Home Page：http://www.fairwaytech.com/Technology/FlexBox.aspx
FlexBox Live Demos：http://www.fairwaytech.com/Technology/FlexBoxDemo.aspx
进入正题，如果你也想试试，那就跟我一起来。
本示例使用的是Northwind数据库，如果你的SQL Server中没有，也可以改成你自己的随便什么数据库，或者Google.com.hk去下一个Northwind数据库。
数据库准备好后就该准备本文的关键工具，FlexBox。你可以从Home Page中找到下载的链接，但是从那里下载的包中并不包含JQuery基础框架，你需要自行准备，而且，官方包中还有一个小bug（后面会提到），所以我建议大家直接使用我提供的代码。点击这里下载FlexBox
下面开始项目：
打开Visual Web Develop 2008，新建一个项目，命名为FlexBoxTest。
在项目中先添加一个新建项，模板选择“数据集”（你也可以使用你自己的方法，这里只是要连接数据库并获取取数据），因为是示例，所以直接使用默认命名DataSet1.xsd即可。
在新建的数据集中添加一个TableAdapter，按照配置向导一步一步建立数据库连接（这段应该可以省略），最后添加一个表以作测试（本例添加Empolyee表）。
为了保证文本提示功能的准备性和易用性，这里我们要新建一个查询（Query），新建查询要带有一个Where子句，内容为：where FirstName like @key+'%'，可以把这个查询命名为GetDataByKey。
对DataSet1.xsd进行保存。
下面进行页面编写：
先把FlexBox目录解压到项目中，然后在Default.aspx页面的<head></head>中添加如下内容：
code
< script src ="FlexBox/js/jquery.flexbox.js" type ="text/javascript" ></ script >
< link href ="FlexBox/css/jquery.flexbox.css" rel ="stylesheet" type ="text/css" />
接下来在<body></body>中添加两个<div>，内容如下：
< div id ="ffb9-result" style ="clear:both" ></ div >
其中，ffb9是要显示文本框的，而ffb9-result则是要显示操作的结果。
然后在页面中添加JS代码，可以写到<body>中，也可以写到<head>中，内空如下：
$().ready( function () {
$( ' #ffb9 ' ).flexbox( ' Results.aspx ' , {
autoCompleteFirstMatch: false ,
noResultsText: '' ,
onSelect: function () {
$( ' #ffb9-result ' )
.html( ' You selected " ' + this .value + ' ", ' +
' which has a hidden value of ' +
this .getAttribute( ' hiddenValue ' ));
}
});
$( ' #ffb9_input ' ).blur( function () {
$( ' #ffb9-result ' )
.html( ' The value passed when the form is ' +
' submitted is " ' + this .value + ' " ' );
});
});
</ script >
注意，这里引入了一个Results.aspx文件，这个文件就是要提供输入提示的内容的。
到这里，Default.aspx中的内容已经编写完毕，接下来，我们就要新建一个Results.aspx文件。
在介绍Results.aspx中的内容前，先简单介绍一下FlexBox的基本工作原理（详细内容在FlexBox Home Page中都能找到）：
FlexBox对文本框进行提示的依据就是要通过另外一个符合JSON结构的文本中来实现，所谓JSON结构，Google.com.hk中会找到，而FlexBox对文本结构有特定的要求，具体如下：
{"id":"2","name":"Andrew"},
{"id":"9","name":"Anne"}
]}
所以，我们要让Results.aspx返回如上形式的JSON结构的内容。
Results.aspx文件中不需要写入任何内容，而是要在Results.aspx.cs文件中编码：
当然，要先进行必要的引用：
using System.Text;
using System.Web.Script.Serialization;
然后写入两个新类（可以写到Results.aspx.cs中，也可以新建类文件）：
code
public class FlexBoxItem
{
string _id = string .Empty;
string _name = string .Empty;
/// <summary>
/// get/set id of flex box item
/// </summary>
public string id
{
get { return _id; }
set { _id = value; }
}
/// <summary>
/// get/set name of flex box item
/// </summary>
public string name
{
get { return _name; }
set { _name = value; }
}
/// <summary>
/// constructor with id and name as parameters
/// </summary>
/// <param name="fid"></param>
/// <param name="fname"></param>
public FlexBoxItem( string flexbox_id, string flexbox_name)
{
_id = flexbox_id;
_name = flexbox_name;
}
}
[Serializable()]
public class FlexBoxResult
{
List < FlexBoxItem > _results = null ;
/// <summary>
/// get/set flexbox item list
/// </summary>
public List < FlexBoxItem > results
{
get { return _results; }
set { _results = value; }
}
/// <summary>
/// constructor with flexbox item list
/// </summary>
/// <param name="_list"></param>
public FlexBoxResult(List < FlexBoxItem > _list)
{
_results = _list;
}
}
接下来要在Results类中写入如下代码：
代码
{
private DataSet1TableAdapters.EmployeesTableAdapter _EmployeeTableAdapter = null ;
private DataSet1TableAdapters.EmployeesTableAdapter Adapter
{
get
{
if (_EmployeeTableAdapter == null )
{
_EmployeeTableAdapter = new FlexBoxTest.DataSet1TableAdapters.EmployeesTableAdapter();
}
return _EmployeeTableAdapter;
}
}
protected void Page_Load( object sender, EventArgs e)
{
// q=a&p=1&s=10&contentType=application/json; charset=utf-8
DataSet1.EmployeesDataTable etb = new DataSet1.EmployeesDataTable();
if (Request.QueryString[ " q " ] == null )
{
etb = Adapter.GetData();
}
else
{
etb = Adapter.GetDataByKey(Request.QueryString[ " q " ].ToString());
}
List < FlexBoxItem > _flexList = new List < FlexBoxItem > ();
foreach (DataSet1.EmployeesRow dr in etb.Rows)
{
_flexList.Add( new FlexBoxItem(dr[ " EmployeeID " ].ToString(), dr[ " FirstName " ].ToString()));
}
FlexBoxResult _flexBoxResult = new FlexBoxResult(_flexList);
JavaScriptSerializer _jss = new JavaScriptSerializer();
StringBuilder _jsonResult = new StringBuilder();
_jss.Serialize(_flexBoxResult, _jsonResult);
Response.ContentType = " application/json " ;
Response.Write(_jsonResult.ToString());
Response.End();
}
}
到此，就一切OK了，生成项目，并运行Default.aspx，你将会看到想要的结果。
下面提供本示例完整的源码下载：FlexBoxTest.zip
最后说一下FlexBox中的一个bug，就是文本框中无法输入小写字母q，在本例中已经修正了这个问题。
有事先闪，回头再来完善。