Perl cgi-bin auto complete

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.

score 3 · Answer 1 · edited Nov 01 '16 at 16:45

3

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

edited Nov 01 '16 at 16:45

Mr Lister

45,515
15
108
150

answered Oct 21 '16 at 05:00

J Singh

162
5

@Atwal Okay well. How it will fetch from DB? – mkHun Oct 21 '16 at 05:01
Using an AJAX call to make an HTTP request would be the right way. Check out below answer: http://stackoverflow.com/questions/29204934/how-to-populate-dependable-drop-down-using-ajax-and-php – J Singh Oct 21 '16 at 05:02
4

Why use AJAX at all? If the list was small but is becoming _unmanagable_ for a drop down we can asume that it's less than a few kilobyte. There is no harm in just building the whole `` element will all ` – simbabque Oct 21 '16 at 08:02

mkHun · Accepted Answer · 2016-10-21T05:03:34.643

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

Perl cgi-bin auto complete

2 Answers2