Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

关闭搜索

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

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

时间：2010-08-21 来源：怪稻_KID

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

本文的内容是要实现一个类似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-1.2.6.min.js" type="text/javascript"></script>
<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>，内容如下：

其中，ffb9是要显示文本框的，而ffb9-result则是要显示操作的结果。

然后在页面中添加JS代码，可以写到<body>中，也可以写到<head>中，内空如下：

注意，这里引入了一个Results.aspx文件，这个文件就是要提供输入提示的内容的。

到这里，Default.aspx中的内容已经编写完毕，接下来，我们就要新建一个Results.aspx文件。

在介绍Results.aspx中的内容前，先简单介绍一下FlexBox的基本工作原理（详细内容在FlexBox Home Page中都能找到）：

FlexBox对文本框进行提示的依据就是要通过另外一个符合JSON结构的文本中来实现，所谓JSON结构，Google.com.hk中会找到，而FlexBox对文本结构有特定的要求，具体如下：

{"results":[
{"id":"2","name":"Andrew"},
{"id":"9","name":"Anne"}
]}

所以，我们要让Results.aspx返回如上形式的JSON结构的内容。

Results.aspx文件中不需要写入任何内容，而是要在Results.aspx.cs文件中编码：

当然，要先进行必要的引用：

using System.Data;
using System.Text;
using System.Web.Script.Serialization;

然后写入两个新类（可以写到Results.aspx.cs中，也可以新建类文件）：

code [Serializable()]
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类中写入如下代码：

code 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，在本例中已经修正了这个问题。

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