Click here to Skip to main content
15,306,142 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi Everyone,

can you guide on how to make Advance search like this link below

click here

hoping to help me out on this
thanks in advance
BobJanova 20-Feb-12 11:23am
That looks like a huge pain to use.
zyck 20-Feb-12 11:24am
yeah that's painful my client want that search criteria
I don't know how to start

Okay, I will give a broad overview of how I'd go about this, as I've done something a bit similar, though not with (so there won't be any code, and please don't ask for any, as I'm making it up as I go along :) ).

Client side
Each row is a separate entity, which will act the same. So you want a template somewhere in the page – you could construct it in JavaScript, but I prefer to have it in the static markup but under a div which is hidden. It's a complex entity, so put it in an outer div element (still under the hidden container, though), and give that an id like "search_template" so you can get at it from script.

<div style="display:none">
 <div id="search_template" class="search_row">
  ... <!-- In here goes the actual content-->
  e.g. <input type="text" id="search_template_content"/>

Then you want a JavaScript function to clone the template, replacing any instances of "search_template" with "search_next_id". You can do that just with an innerHTML replace, in most cases:

function clone(baseid){
 // baseid: the root of the name, i.e. 'search_'
 var templatename = baseid + 'template';
 var template = document.getElementById(templatename);
 var indexer = 1;
 while(null != document.getElementById(baseid + indexer)) indexer++;
 var newdiv = document.createElement('div');
 var newname = baseid + indexer; = newname;
 newdiv.innerHTML = template.innerHTML.replace(new RegExp(templatename), newname);
 var containerdiv = document.getElementById('search_container');

And obviously now you need to have a search_container:
<form action="/Search">
 <div id="search_container" style="margin: 0; padding: 0" />
 <input type="button" value="Add entry" onclick="clone('search_')"/>
 <input type="submit"/>

Finally, you probably want to call clone('search_') in your body.onload handler or in inline script, so you get one search criteria row to start with.

You should start with a very simple template (i.e. a single search box), but hopefully you know enough JavaScript to do the single line cleverness (it involves a lot of making <input> controls or custom JS controls, and AJAX lookups to get content).

Server side you will receive a set of query pairs that look like

... which you will have to use Request.Form to look through and create the search logic appropriately.

This is getting long enough to be an article so I'll stop there :P ... that should be enough to set you on the right path at least.
zyck 20-Feb-12 16:13pm
thanks BobJanova
Looks great one solution part, how do I read value when every controls created?
BobJanova 20-Feb-12 16:20pm
On the server side, you get them as query parameters. If you want to get them client side, you can look the elements up by ID (e.g. document.getElementById('search_1_content').value).
zyck 20-Feb-12 16:32pm
Thanks Bob, Now I need to research for the Dynamic query when they select on the controls, thanks Alot bob
Take a look at these links I think a breadcrumb effect is what you might be looking for.[^][^]
However if you do still want to go the grid way. I'd suggest this jquery implementation.[^]
Building a search form[^][^]
Hope this helps.
Please mark as your solution if this helps you. thanks
zyck 20-Feb-12 16:16pm
thanks for the reference Dean Oliver
Take a look at EasyQuery component library.

Here is a live demo web-page built with EasyQuery widgets:

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900