Creating search field for a list component

Question

i have created a glossary of terms using the list component and populating it via an XML file.
what i would like to do is create a search field that as the user types in the search bar if there are any matching entries in the list, the focus/selection jumps to that particular item in list. i don't want to clear the list just go to the item that matches.
i would like it to be predictive so if i have these entries:
samson
seek
seether
south
and the user types "s" in the search box to the first "s" entry in the list (samson) is selected, if they type "se" the selection jumps to the first entry with "se" in it (seek) if they type "seet" the selection jumps to "seether" and so on.
i have absolutely no idea how to do it, but more importantly...is this possible?
i have attached the sample files that i have been working on.
thanks in advance

Answer 1

You need the lowercase. the keyCode of the keybpardevent returns the key's uppercase charcode. So the A-key allways returns 65. Therefore convert keycode to char and to lowercase before appending after what's allready there in the field.
To have the user not have to type the words with proper casing, convert the label to lowercase before doing the indexOf search.
import fl.data.DataProvider;
//-------declare vars----------------
var firstClick:Boolean=true;
var loader:URLLoader = new URLLoader();
var dp:DataProvider = new DataProvider();
var xml:XML;
//-------add listeners---------------
loader.addEventListener(Event.COMPLETE,onLoaded);
glossary.lb.addEventListener(Event.CHANGE, itemChange);
glossary.search_bar.addEventListener( FocusEvent.FOCUS_IN, clearbox );
glossary.search_bar.addEventListener( KeyboardEvent.KEY_DOWN, onSearch );
//-------functions--------------------
//clears the input field when the user clicks into it for the first time
//eliminates the need for them to highlight and delete the "type search here" text
function clearbox( e:FocusEvent ):void {
    if (firstClick==true) {
        glossary.search_bar.text="";
        firstClick=false;
//populate description box with definition when item is selected
function itemChange(e:Event):void {
    glossary.ta.text=glossary.lb.selectedItem.data;
//creates the data provider for the list based off external XML file
//arranges the items in alphabetical order
//populates the list
function onLoaded(e:Event):void {
    xml=new XML(e.target.data);
    var il:XMLList=xml.channel.item;
    for (var i:uint=0; i<il.length(); i++) {
        dp.addItem({data:il.description.text()[i],label:il.title.text()[i]});
    dp.sortOn("label");
    glossary.lb.dataProvider=dp;
    glossary.ta.text="Please make a selection below";
//dynamic search engine to locate items in the list
function onSearch( e:KeyboardEvent ):void {
    trace( e.keyCode );
    var input:String = ( glossary.search_bar.text + String.fromCharCode( e.keyCode ).toLowerCase() );
    trace( input )
    for (var i:uint = 0; i < dp.length; i++) {
        if (dp.getItemAt(i).label.toLowerCase().indexOf(input)==0) {
            glossary.lb.selectedIndex=i;
            glossary.ta.text=glossary.lb.selectedItem.data;
            break;
        } else {
            glossary.ta.text="no matching searches";
//-------load the xml--------------
loader.load(new URLRequest("xml/movie1.xml"));