Perl cgi-bin自动完成

Question

I have a very simple website that I built using Perl cgi-bin. I have one form field that displays all the application codes in my small company. Since the application list was small, I used a simple drop down list. However, with growing number of applications, the drop down is turning out to be unmanageable. Is it possible to use auto-complete for this field using Perl cgi ?

Edit : The application names are stored in a database table. I pull the application list from the database.

Answer 1

HTML5 has a nifty tag for Autocomplete Dropdown, <datalist> . Below is the usage definition for this tag as found on w3schools.com:

Definition and Usage The <datalist> tag specifies a list of pre-defined options for an <input> element.

The <datalist> tag is used to provide an "autocomplete" feature on elements. Users will see a drop-down list of pre-defined options as they input data.

Use the <input> element's list attribute to bind it together with a <datalist> element.

Code Example:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

For more details, refer to this link: http://www.w3schools.com/tags/tag_datalist.asp

Answer 2

Alone Perl-CGI it can't do.

Try to use javascript inside your CGI script. I added the sample html and javascript below

HTML code

<form>
    <input type="text" id="someid" onkeyup="myfunc()" style="width:150px"/>
        <div id='auto_div' style="position:absolute; width:150px; height:100px;">
        </div>
</form>

Javascript with AJAX call

function myfunc()
{
    var val = document.getElementById("someid").value;


    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            var res = xmlhttp.responseText;         
            document.getElementById("auto_div").innerHTML= res;
        }   
    }

    xmlhttp.open("GET","database.pl?input_value="+val,true);
    xmlhttp.send();
}

Trigger the myfunc function on every keyup ( onkeyup() ) then get the value of input tag. Then pass the value from the DB connecting perl file using ajax the result of the output will store into the res variable then write the conent into the auto_div