what are good ways to implement search and search results using ajax?

Question

i have some text boxs in a page and in the same page there will be a table 'grid' like for holding the search result.

When the user start editing and of the textbox above, the search must start by sending all textboxs values to the server 'ajax', and get back with the results to fill the below grid.

Notes:
This grid should support paging, sorting by clicking on headers and it will contains some controls beside the results such as checkboxs for boolean values and links for opening details in another page.

I know many ways to do this some of them are:
1- updatepanel around all of these controls and thats it "fast dirty solution"
2- send the search criteria using ajax request using JQuery post function for example and get back the JSON result, and using a template will draw the grid "clean but will take time to finish and will be harder to edit later".
3- ....

My question is:
What do you think will be the best choice to implement this scenario? because i face this scenario too much, and want to know which implementation will be better regarding performance, optimization, and time to finish.

I just want to know your thoughts about this issue.

Answer 1

In short:

1. performance:
   • write a good search filter method, prevent duplicate, search by relevance, etc!
   • how many results you expect to get back? do you need to use JSON || HTML || XML ?;
2. optimization:
   • keep data results separated from HTML template;
3. time to finish:
   • use a full featured JS plug & play Data Grid plugin
   • use object oriented PHP datagrid lib like http://ajaxphpdatagrid.sourceforge.net/ OR http://www.apphp.com/php-datagrid/index.php

Hope this help a little! ;)

Answer 2

This is a common pattern, and there are several jQuery projects that address it in a generalized way. You say you're facing this scenario often, so I'd suggest benefiting from the ongoing refinement of one of the popular jQuery datagrid/datatable plugins. These (and others) all support timing and search-field content thresholds to maintain sanity with those ajax calls to the server:

• Datatables
• jqGrid
• Ingrid

Here's an article by Phil Haack describing the use of jqGrid in an ASP.NET MVC context.

And here's an old but very popular SO question specifically on jQuery grids/tables.

Answer 3

Ajax request and JSON. It's tried-and-true, and once you have a good way to display the results (probably just filling the table from an array), you can worry about the server-side code separately.