使用FlexBox和Json实现类似ComboBox（类似Google的输入提示和自动）功能-基于JQuery-ASP.NET
很久没写代码了，也很久不写技术文了，不知道该从何写起，本文将会有点乱，请见谅。
本文的内容是要实现一个类似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，在本例中已经修正了这个问题。
有事先闪，回头再来完善。
