how to make this search and make list sort

[cfnew]

<form name="myform" action="" method="post">

<input type="checkbox" name="check_list" value="1">ASP<br>
<input type="checkbox" name="check_list" value="2">PHP<br>
<input type="checkbox" name="check_list" value="3">JavaScript<br>
<input type="checkbox" name="check_list" value="4">HTML<br>
<input type="checkbox" name="check_list" value="5">MySQL<br>
<input type="checkbox" name="check_list" value="5">MyStats<br>
<input type="checkbox" name="check_list" value="5">My function<br>
<input type="checkbox" name="check_list" value="5">coldfusion<br>
<input type="checkbox" name="check_list" value="5">mainframes<br>
<input type="checkbox" name="check_list" value="5">microstrategy<br>
<input type="checkbox" name="check_list" value="5">sql server 2000<br>
<input type="checkbox" name="check_list" value="5">sqlserver 2005<br>

<input type="checkbox" name="check_list" value="5">MySQL4.0<br>

<input type="text" name="search" />
<input type="button" name="search" value="Search"/>
</form>

Hi Above is the code that has the checkbox list that will come from database ann i need to add search box to search for particular label for EX:sqlserver.

when user enters that text to search the above list has to be sorted so that the sqlserver options will come on top of the list.

below is code from database

<cfoutput query="qryAvailableCourses" >

<input type="checkbox" name="course_id" id="#course_id#" value="#course_id#" #checked#/>
                        <label for="#course_id#">
                              <span style="padding-left:5px;"> </span>
                                  #course_desc# (#course_id#)
                        </label>

</cfoutput>

will you please help me how to solve this issue .

Thanks.

[Dan_Bracuk]

I'm not sure that you thought this through.  What do you want to happen if the user checks more than one box?

[cfnew]

hi we have almost more than 1000 options so user has to take long time to select particular options , so we need to add search box so that when user search for particular options so that options have to be sorted in the way so that user wills elect options easily.

[cfnew]

hi i need any help regarding this to add some javascript filter to this , any help regarding this?

Thanks,

[Fernis]

Apparently you are working on some kind of competency matrix for applicants or employees.

If you have hundreds of options to choose from, I would:

1) categorize the options, so that similar options belong to similar groups.

2) store the options in a database table like (id,category,optionname)

3) bind the search box value to a <cfdiv> or <cflayoutarea>, which queries and displays only the options which match the keyword (or the category of which matches the keyword)

4) display a grid or a list of what the user has added to the option list on the same page.

In practice, the GUI could have for example these elements:

[ search box ] <= user types "sql"

[ Here's an area where options are loaded with AJAX call, matching the "sql" (group or option name)

| mysql

| mssql server

| oracle

[add] selected

[ Here's an area which displays the techniques and skills the user has added, updates on the fly.

| Category: Mainframes

|    IBM

|    SUN Servers

| Category: Language skills

|    Latin

|    Klingon

[remove] selected (or click link to remove)

I would not try to play with client side javascript/css tricks with this kind of solution, when you have ColdFusion's power at your hands.

--

-Fernis - fernis.net - ColdFusion Developer For Hire

[cfnew]

hi thanks for ur reply , i already breaked the code in to tabs using cfloayout but user is asking that they need search box in each tab so that they will search and find options what they want.

here i am waiting to find a way how to write this filter .

i am pasting my code here please find code and if you find a way please let me know.

<cflayout type="tab" name="courses" tabheight="135" style="background-color:##DBEAF5" align="justify" >           
    <cfoutput query="qryAvailableCourses" group="course_type_id">   
        <cflayoutarea title="#course_type_desc##course_type_id#" name="#course_type_desc#" style="background-color:##ffffff; width:600px;padding-left: 5px; padding-top: 5px;padding-right: 5px;padding-bottom: 5px;" >           
                   <cfset selectedCourses = "">
                    <cfif structKeyExists(attributes, 'course_id')>
                            <cfset selectedCourses = attributes['course_id']>
                    </cfif>                   
                <div style="clear:right;">
                    <span class="actionButtons1" style="width:575px; margin:0; padding:0;">
                    <input type="button"  name="checkall"  onmouseover="hover(this);" value="Check All" onclick="checkAll(document.getElementById('selectForm'), 'results#course_type_id#');" />
                    <input type="button"  name="Un_CheckAll"   onmouseover="hover(this);"  value="Uncheck All" onClick="UnCheckAll(document.getElementById('selectForm'), 'results#course_type_id#');">               
                    </span>
                </div>
                <div style="height:135px; overflow:auto; float:left;">   
                    <cfoutput>                           
                         <span class="row#Int(currentrow mod 2)#" style="float:left; width:575px; margin:0; padding:0;" >    
                         <cfset checked = "" />
                                    <cfif listcontains(selectedCourses,course_id)>
                                        <cfset checked = 'checked="true"' />
                                    </cfif>               
                            <input type="checkbox" name="course_id" id="#course_id#" value="#course_id#"  class="results#course_type_id#" #checked#/>
                                <label for="#course_id#">
                                      <span style="padding-left:5px;"> </span>
                                          #course_desc# (#course_id#)
                                </label>
                         </span>                            
                        <!---<div style="clear:both; line-height:0px; margin:0px !important; padding: 0px;"> </div> --->
                    </cfoutput>   
                 </div>           
        </cflayoutarea>               
    </cfoutput>   
</cflayout>

[Fernis]

I am more concerned about how you are representing the user's current course choices in the GUI.

If you used a javascript filter to show only courses that match the search text, how do the users see what they have chosen?

1. User searches for "sql"

2. MySQL, MSSQL and Oracle courses are displayed

3. User checks "Oracle"

4. User searches for "database"

5. "Database design" is displayed, previous courses are hidden.

6. User cannot see any checkboxes because they were hidden.

Of course, using JQuery and JQueryUI, you could do the filters and killer drag-drop interfaces (combined with cfajaxproxy), but I think that's a bit too advanced for yo (if you're in hurry). That would be optimal (less server load).

But to keep things simple, I'd stick with simple server side CFQUERY filters, using WHERE course_name LIKE '%#search_term#%', refreshing the list using {bind}ing.

-Fernis