How to narrow a FAQ-List as you type?

[totoff]

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

[Pete]

Not sure, but I think this might be exactly what you are looking for: http://stackoverflow.com/questions/463143/narrow-a-list-of-items-as-you-type-with-javascript

jQuery is the easiest solution since you already have all elements on the page before you narrow them down

[Philipp]

http://listjs.com/

Could maybe help you. 

[diogo]

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

[Pete]

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

[diogo]

[Soma]

It happened to me. I wrote some post and after posting it was gone forever

[diogo]

Pf, I think I will start writing my posts in sublime text from now on...

[Pete]

Well as it's not something I can say I'm able to repeat I'd guess maybe browser but possibly server related?

Anyway, way off topic now

[totoff]

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.

[Adam Kiss]

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

[Pete]

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.