Topic: Advanced item list for Auto Completer mechanism (SOLVED)

Hi everybody,

The standard way to render the auto completer functionality (script aculo library) is to use a list like <ul> <li></li> ... <li></li> </ul>.

I would like to do a more complex render. For example, my result is a list of "bands", and a list of "titles".

So I'd like to insert a "non selectable" line before all "bands" results with the caption "Bands : (XXX results)", and a "non selectable" line between "bands" results and "titles" results with the caption "Titles : (XXX results)".

Is it possible to do that with script.aculo framework ?

Cheers.


Gilles.

Last edited by faistoiplaisir (2008-10-30 06:17:15)

Re: Advanced item list for Auto Completer mechanism (SOLVED)

Ok, i've got an idea and i solve my problem like this :

For the first <li> of each section, i use a different css. For the selected item, script.aculo set the "selected" class. Traditionnaly, you can find this code to hightlight the selected line :

.auto_complete ul li.selected
{
   background-color: red;
}

With my solution, the list construction is like this :
# First section : Groupe results
<% bFirst = true %>
<% for groupe in @nom_groupes.to_a -%>
    <% if bFirst %>   

    <li class="autocomplete_item_first">               
    <div class="autocomplete_section_title">Groupes:</div>
    <% bFirst = false %>

    <% else %>
   
    <li class="autocomplete_item">
   
    <% end %>
      
        <div class="autocomplete_result"><%= groupe.nom_groupe -%></div>
    </li>
<% end -%>

# Second section : Titre results
<% bFirst = true %>
<% for titre in @nom_titres.to_a -%>
    <% if bFirst %>

    <li class="autocomplete_item_first">
    <div class="autocomplete_section_title">Titres:</div>
    <% bFirst = false %>

    <% else %>

    <li class="autocomplete_item">

    <% end %>

    <div class="autocomplete_result"><%= titre.titre-%>/div>               
    </li>
<% end -%>


Now, to apply the slected red background correctly, you need to modify your css :
.auto_complete ul li.selected .autocomplete_result
{
   background-color: red;
}

The difference between the css for "autocomplete_item_first" and "autocomplete_item" is that "autocomplete_item_first" need more height.

Cheers