486

CHAPTER 12

Live search using XSLT

separate design and coding teams, CSS helps to keep them from treading on each other’s toes. We can either include the stylesheet as an external file on our search page or embed the code into the search page. Using an external CSS file is preferable since it is cached by the browser and decreases the page-loading time in the future. The stylesheet rules are shown in listing 12.9. Listing 12.9 Cascading Style Sheet

table{

border: 1px solid black;

b Style the

table

border-collapse: collapse;

width: 50%;

}

th, td{

border: 1px solid black;

c Style the

padding: 3px;

table cells

width: 25%;

}

th{

d Style the

background-color: #A0A0A0;

header cells

}

The first CSS rule we are applying is to the table tag b. In this case, we want to make the border a solid-black line one pixel wide. We set the table’s border-collapse property to collapse. The collapse CSS model basically allows the properties of the table to be uniform. The borders become even thicknesses, with adjacent cells sharing borders rather than accumulating to double or triple thicknesses. The final step for the table tag is to set the table width property. In this case, we are setting the width of the table to 50% of the div that it is contained in since we are not returning a large number of columns. Each of our columns will contain only a small amount of data, so the table does not need wide spacing.

After styling the table element, our next step is to format the table’s body and header cells c. Just as we did for the table, we are setting the border to be a solidblack one-pixel line. We insert padding into the cells so that the text is not sitting directly on the cell borders. We also set the width property of the cells to 25% of the width of the table so that all four columns are uniform in size. The final step to apply CSS to our table is to change the properties of the header cell so it stands out from the body cell. We reference the header cell d and change the background-color of the cell to a shade of gray. We can change other properties here, such as font-weight, color, and so on. After we finish Licensed to jonathan zheng

Completing the search

487

Figure 12.5

The search results are displayed from the Ajax

live search with CSS applied to the elements.

applying the stylesheet properties, we save our document and run the same search again. Our new formatted table is shown in figure 12.5.

As you can see, the table has a structured format that was easily created by applying CSS properties to our table elements. If we wanted to add more functionality to our stylesheet, we could add class references to the XSLT file to make it even more flexible. CSS lets us customize the table any way we want, but we may want to improve the search in other areas as well.

12.5.2 Improving the search

One of the benefits of Ajax is that it’s easy to pass information back to the server. This project was a simple exercise for creating a search utilizing Ajax and XSLT to display a formatted results table with a minimum amount of effort. We can make the live search as sophisticated as we want. Let’s look at some ways to improve it. Including new features

The search form we created uses a single textbox and a single submit button to perform the search. We can easily adapt this search to use multiple parameters, such as additional search parameters with the contact name or country. All we have to do is send the additional parameters back to the server and have the server-side code check for them. That means the users can have additional ways to look for information, making the form more useful.

We could add other Ajax features to this script, such as the double combination script, as we did in chapter 9. This would help reduce the possibilities from which the user can choose. We can implement techniques from chapter 10 with the type-ahead suggest,