CODEWITHSUNDEEP
perlcgi-bin
user1074593
user1074593

Reputation: 630

Perl cgi-bin auto complete

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.

Upvotes: 0

Views: 570

Answers (2)

J Singh
J Singh

Reputation: 162

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>

enter image description here

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

Upvotes: 3

mkHun
mkHun

Reputation: 5927

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

Upvotes: 1

Related Questions