Perl cgi-bin 自动完成答案

【问题标题】：Perl cgi-bin auto completePerl cgi-bin 自动完成
【发布时间】：2016-10-21 04:29:07
【问题描述】：

我有一个使用 Perl cgi-bin 构建的非常简单的网站。我有一个表单域，显示我的小公司的所有应用程序代码。由于应用程序列表很小，我使用了一个简单的下拉列表。然而，随着应用程序数量的增加，下拉列表变得难以管理。是否可以使用 Perl cgi 对该字段使用自动完成功能？

编辑：应用程序名称存储在数据库表中。我从数据库中提取应用程序列表。

【问题讨论】：

标签： perl cgi-bin

【解决方案1】：

HTML5 有一个漂亮的自动完成下拉标签，<datalist>。以下是 w3schools.com 上该标签的用法定义：

定义和用法<datalist>标签指定一个列表 <input> 元素的预定义选项。

<datalist> 标签用于在元素。用户将看到预定义的下拉列表输入数据时的选项。

使用<input> 元素的列表属性将其与 <datalist> 元素。

代码示例：

<input list="browsers">

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

更多详情请参考此链接：http://www.w3schools.com/tags/tag_datalist.asp

【讨论】：

@Atwal 好的。它将如何从数据库中获取？
使用 AJAX 调用发出 HTTP 请求是正确的方法。查看以下答案：stackoverflow.com/questions/29204934/…
为什么要使用 AJAX？如果列表很小但是对于下拉列表变得无法管理，我们可以假设它小于几千字节。仅仅构建整个<datalist> 元素将所有<option>s 放在后端并将其包含在呈现的HTML 中并没有什么坏处。您不必异步获取所有内容。通常，务实的方法不仅是最简单的，而且也是最有用的。

【解决方案2】：

仅靠 Perl-CGI 是不行的。

尝试在您的 CGI 脚本中使用 javascript。我在下面添加了示例 html 和 javascript

HTML 代码

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

带有 AJAX 调用的 JavaScript

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();
}

在每个按键 (onkeyup()) 上触发 myfunc 函数，然后获取输入标签的值。然后使用 ajax 从 DB 连接 perl 文件传递值，输出结果将存储到 res 变量中，然后将内容写入 auto_div

【讨论】：