用Dreamweaver实现简单的网页搜索功能

客户在浏览公司网站时，常常会对一些产品进行较为简单的查询搜索，本实例将讲解其实现过程。 中国网管联盟bitsCN.com

　　效果说明

网管联盟bitsCN@com

　　客户可以在如图 86-1 所示的页面中选择特别查询字段，输入查询数据，对产品进行模糊查询，结果如图 86-2 所示。

网管论坛bbs_bitsCN_com

　　创作构思

　　在“ index.aspx ”页面中添加下拉列表、文本框及按钮，完成产品搜索页面的设置，制作出跟实例 85 中树形目录索引显示页面相同的页面作为产品搜索页面，然后设置程序以实现产品搜索。

网管下载dl.bitscn.com

　　操作步骤

网管u家u.bitscn@com

　　步骤一　产品搜索页面的设置

　　（ 1 ）在“ LeftTb ”表格中添加 4 行并设置样式。打开“ index.aspx ”，在设计视图里的“ LeftTb ”表格中添加 4 行并设置样式，如图 86-3 中圆角方框所示。

网管联盟bitsCN_com

网管u家u.bitsCN.com

　　（ 2 ）添加控件。单击 ASP.NET 快捷菜单栏上的【 asp ：下拉列表】按钮，为新添加的第 2 行添加下拉列表控件，如图 86-4 所示。 网管u家u.bitsCN.com

　　（ 3 ）添加列表标签及相应的值。在新添加的下拉列表“ FieldList ”属性窗口中单击【列表项】按钮，在弹出的【列表项】对话框中添加 3 个标签，一个标签为“产品编号”，其值为“ CPID ”；一个标签为“产品名”，其值为“ CPNAME ”；一个标签为“产品分类”，其值为“ CPFL ”，结果如图 86-5 所示。

中国网管论坛bbs.bitsCN.com

中国网管论坛bbs.bitsCN.com

　　（ 4 ）继续在新添加的行中添加文本框，设 ID 为“ SearchTxt ”，并添加两个按钮，一个按钮为“搜索”， ID 为“ GoBt ”；另一个按钮为“高级搜索”， ID 为“ TopgoBt ”，结果如图 86-6 所示。

网管下载dl.bitscn.com