使用FlexBox和Json实现类似ComboBox（类似Google的输入提示和自动）功能-基于JQuery-ASP.NET

很久没写代码了，也很久不写技术文了，不知道该从何写起，本文将会有点乱，请见谅。

本文的内容是要实现一个类似ComboBox的功能，也可以说是类似Google的输入提示和自动完成，其实这样的文章网上也不少，只是在下愚笨，几乎没从众多中文文章中受益，倒是从一些E文文章里有不少的收益，最终实现了想要的效果，小庆祝一下……

代码

public partial class Results : System.Web.UI.Page
{
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，在本例中已经修正了这个问题。

有事先闪，回头再来完善。