Jump to content

How to narrow a FAQ-List as you type?


totoff
 Share

Recommended Posts

hi forum,

in my current project i'll have a very long faq-list (ul, li). thinking on how i could improve the usability of this list, i had the idea to provide an entry box on top of the list: as the user types into it, the list narrows itself depending on which letters are typed (example: if "a" is entered the list is filtered and only list-items starting with letter "a" are presented).

does anyone of you has ever made something similar or knows a good route how to implement it? i would appreciate any hint.

thanks in advance, christoph

Link to comment
Share on other sites

For the faq you should consider to use a definition list instead of (ul, li) because it will give you more control for styling the questions and the answers, and it's semantically more correct (arguably, of course):

<dl>
  <dt>question?</dt>
    <dd>answer</dd>
  <dt>question?</dt>
    <dd>answer</dd>
</dl>

edit: what happened to the first part of my post?? I had a paragraph linking to this http://bio.mq.edu.au/Tools/jquery/plugins/riklomas-quicksearch/examples/... or didn't I? hm, I'm confused :)

  • Like 1
Link to comment
Share on other sites

OT: I re-programmed the forum software so you can't post as fast diogo - randomly deleting some content should slow you down :P Actually, I don't know, but I have had an unrelated weird issue today that I'm hoping was just badly cached javascript.

  • Like 1
Link to comment
Share on other sites

hi together,

thanks for your replies. list.js looks pretty much right (and easy to implement ;-). so i'll give it a try. and extra thanks to diogo, definition list is of course the right markup for a faq list.

Link to comment
Share on other sites

I'd say that if your faq is really long you should categorize it more, split it into sections.

That's a very valid concern - if it is too long then you have quite a lot of content loading on the page. If I was going to list fifty or more I might list the titles and then use AJAX on click or something to pull in the answer on demand to display the answer - along with list.js to narrow the search first.

Otherwise, depending on the answers, you could end up with a few hundred kilobytes of text on your page and slow loading times.

Lots of ways to approach this, certainly.

Link to comment
Share on other sites

 Share

×
×
  • Create New...