Autocomplete script without AJAX

[raman]

I have a mysql database in which there is a field in which there exist only 12 distinct entries though the database in all has around 200 entries.

I have a PHP page in which the user is supposed to fill one of those twelve entries.I want that when the user types the first letter of it, all the entries starting with it are shown and this continues for the following letters.

This is the HTML code.The name of that input is param. Can somone tell a PHP script for my purpose ?

 

Code: [select]

<form action = "keysearch.php" method = "post"><table width="95%" border="0" align="center" cellpadding="6" cellspacing="0">

                              <tr>

                                <th colspan="4" align="left">Keyword Search</th>

                              </tr>

 

                           

                              <tr>

                                <td width="20%">Keyword:</td>

                                <td width="20%"><form action = "keysearch.php" method = "post"><input type = "textbox" name="searchtext" style="color:royalblue;" size="15" value="mitochondria" onFocus=this.value='' ></td><td><input name="filter" type="checkbox" value="1" onClick="toggleLayer('parameter');">Organism Filter

 <input name="param" id="parameter" type="textbox" style="color:royalblue;" value="Toxoplasma gondii" onFocus=this.value=''>&nbsp <input type="submit" value="Get it"></form>

Code: [select]

 

Here I have used the option that only if the user selects the checkbox, the textbox appera and for this I have use a toggle javascript which is as under :resettoggle is for the body onload event. toggle layer is for the onclick event of the checkbox. But I donot get the toggle effect in my browser- Mozilla firefox.

The textbox appears when I click on the checkbox but it doesnot disappear when I click on it again.Can someone explain why ?

Code: [select]

function resettoggle(){

    var e = document.getElementById('parameter');

    var ee = document.getElementById('parametere');

    e.style.display = 'none';

    ee.style.display = 'none';

}

 

function toggleLayer(x){

    var el = document.getElementById(x);

 

    if ( el.style.display ='none'){

      el.style.display='';

      }else if( el.style.display =''){

      el.style.display='none';

      }

}   

Code: [select]

[Psycho]

It all depends on how fancy you want to get. I've done an auto-complete in the past for a text field - so it only showed the first match in the list for what you had currently typed. If youwant to show all the matches then it gets more complex as you need to have a CSS menu to show those options.

 

Probably the best approach would be to use a free resource such as this from the Yahoo! UI Library: http://developer.yahoo.com/yui/autocomplete/

 

Of course it will take some time to read the documentation in order to implement. But, it seems to be a slick implementation. Here's an example page: http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_array.html