Let's have a look at the JavaScript code:

Chapter10/browse.js

$("button[name=search]").button({
	icons: {
		primary: "ui-icon-search"
		},
		text: false
}).click(function(){
		$("input[name=pattern]", $(".content form").first()).remove();
		$("input[name=pattern]").each(function(i,e){
			var val=$(e).val();
			var col=$(e).next().text();
			$(".content form").first() 
			.append(
			'<input type="hidden" name="pattern" value="' 
			+col+','+val+'">'),
	});
		$("button[name=first]").click();
});

Most of the work is done in the click handler of the search button. When the search button is clicked, we have to construct hidden<input> elements in the first form with a name attribute equal to pattern because it is those hidden filter inputs that will be passed to the server as arguments to the action URL when we trigger a submit of the form.

Note the second argument to the jQuery function ($) that selects an<input> element (highlighted). Both the visible<input> elements provided for the user to enter pattern values and the hidden ones in the form containing the navigation buttons have the same name attribute (pattern). We do not want to remove the visible ones as they contain the pattern values we are interested in. Therefore, we restrict the selection to the context of the first form, which is passed as the second argument.

After this, we are left with just the visible<input> elements which we iterate over with the .each() method. We collect both, the value of the<input> element and the content of its next sibling, which will be a (hidden)<span> element containing the true name of the column to filter. Together, these are used to construct a new hidden<input> element that is appended to the form that will be submitted.

After the elements are inserted, we submit this form by triggering the click handler of the submit button with the name attribute equal to first.

Chapter10/browse.py

			yield '<tfoot><tr>'
			for col in self.columns:
				if type(col)==str:
					filtervalue=dict(pattern).get(col,'')
					yield '''<td><input name="pattern" 
							value="%s"><span 
							style="display:none">%s</span> 
							</td>'''%(filtervalue,col)
			yield '</tr></tfoot>
'

The only changes needed in the Python part of our web application are the insertion of suitable<input> elements that are initialized with the current pattern values to give a visible feedback to the user. The resulting HTML for a column that is currently filtered on the value ABC might look like this:

<td>
<input name="pattern" value="ABC">
<span style="display:none">name</span>
</td>