Using Dreamweaver to achieve simple web search function

When browsing the company's Web site, customers often do a relatively simple query search for some products, this example will explain its implementation process.

Effect description

The customer can select a special query field in the page shown in Figure 86-1, enter the query data, and make a fuzzy query on the product, as shown in Figure 86-2.

Creative Ideas

Add Drop-down lists, text boxes, and buttons to the Index.aspx page to complete the Product search page, create a page that is the same as the Tree Catalog index display page in instance 85, and then set up the program to achieve product search.

Operation Steps

Step One Product Search Page Setup

(1) Add 4 rows to the "LEFTTB" table and set the style. Open index.aspx, add 4 rows to the LEFTTB table in Design view, and set the style, as shown in the rounded box in Figure 86-3.

(2) Add the control. Click the ASP: Drop down list button on the ASP.net shortcut menu bar to add a Drop-down list control for the newly added 2nd row, as shown in Figure 86-4.

(3) Add the list label and the corresponding value. Click the list Items button in the FieldList Property window of the newly added Drop-down list. Add 3 labels to the pop-up List Items dialog box, one labeled "Product number", with a value of "Cpid" and a label of "product name" with a value of "CPName"; a label is "product category , the value is "CPFL", and the result is shown in Figure 86-5.

(4) Continue to add a text box to the newly added row, set the ID to "Searchtxt" and add two buttons, one button is "search", the ID is "GOBT", and the other button is "advanced Search" with the id "TOPGOBT", and the result is shown in Figure 86-6.

Step two to achieve product search

(1) Switch to Code view, in the "

Note : For more wonderful tutorials, please pay attention to the triple web Design Tutorial section,