如何为自动完成功能获得正确的 json 数据类型？答案

【问题标题】：How to I get the right json-datatype for the autocomplete function?如何为自动完成功能获得正确的 json 数据类型？
【发布时间】：2011-11-13 23:55:34
【问题描述】：

当我尝试这个时，它按预期工作：在两个字符之后显示匹配的条目。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="development-bundle/jquery-1.6.2.js"></script>
    <script src="development-bundle/ui/jquery.ui.core.js"></script>
    <script src="development-bundle/ui/jquery.ui.widget.js"></script>
    <script src="development-bundle/ui/jquery.ui.position.js"></script>
    <script src="development-bundle/ui/jquery.ui.autocomplete.js"></script>
    <script type="text/javascript">
        $( document ).ready( function() {
            var data = [ 'John', 'Jack', 'Joe', 'Lisa', 'Barbara' ];
            $( "#name" ).autocomplete({
                source: data,
                minLength: 2
            });
        });
    </script>
</head>
<body>
<form>
    <table>
        <tr><td>Name:</td><td><input type="text" 
        id="name" name="name" /></td></tr>
    </table><br />
    <input type="submit" value="OK"/>
</form>
</body>
</html>

这表现不同：在两个字符之后它总是显示所有条目？
第二个例子有什么问题？

#!/usr/local/bin/perl
use warnings;
use 5.014;
use utf8;
use Mojolicious::Lite;

get '/eingabe' => sub {
    my $self = shift;
    $self->render( 'eingabe' );
};

get '/search_db' => sub {
    my $self = shift;
    $self->render( json => [ 'John', 'Jack', 'Joe', 'Lisa', 'Barbara' ] );
};

app->start;

__DATA__
@@ eingabe.html.ep
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="/development-bundle/jquery-1.6.2.js"></script>
    <script src="/development-bundle/ui/jquery.ui.core.js"></script>
    <script src="/development-bundle/ui/jquery.ui.widget.js"></script>
    <script src="/development-bundle/ui/jquery.ui.position.js"></script>
    <script src="/development-bundle/ui/jquery.ui.autocomplete.js"></script>
    <script type="text/javascript">
        $( document ).ready( function() {
            $( "#name" ).autocomplete({
                source: '/search_db',
                minLength: 2
            });
        });
    </script>
</head>
<body>
<form>
    <table>
        <tr><td>Name:</td><td><input type="text"
        id="name" name="name" /></td></tr>
    </table><br />
    <input type="submit" value="OK"/>
</form>
</body>
</html>

【问题讨论】：

请修正您的问题标题。后跟“问题”一词的技术列表（我们已经有标签）不能描述您的问题。

标签： jquery json perl autocomplete mojolicious

【解决方案1】：

在您的第一个示例中，您使用数组来设置自动完成的选项。在第二个中，数组被海里化为 json，但是自动完成功能期望 json 具有特定的键/值对（id、标签和值）。

我认为最好的办法是为自动完成数据定义一个自定义回调，如this tutorial from nettuts 所示。

您的自动完成代码将类似于以下内容：

$("#name").autocomplete({
    source : function(req, add){ 
        $.getJSON("/search_db" + req, function(data){
            suggestions = [];

            len = data.length;

            for(var i = 0; i < len; i++){
                suggestions.push(data[i]);
            };

            add(suggestions); //passing an array to add will populate the suggest list

        });//end getjson callback
    }
})

【讨论】：

我以这种方式更改了我的脚本，但没有得到不同的结果。
你看教程了吗？我认为它在解释如何将自动完成功能与远程数据源和自定义回调一起使用方面做得更完整。
阅读 When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. ... The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above. 和 ... to pass the term to a server-side PHP file. The PHP file will use the term to extract matching contact names from a MySql database. 我想当源是 URL 时，它的行为应该与本地数据不同。
所以通过服务器端的过滤我可以节省流量。

【解决方案2】：

我认为您的示例没有任何问题，它运行良好。但请确保您从正确的路径加载您的 JS，并且您正在尝试正确的 url：http://127.0.0.1:3000/eingabe

我修改了您的示例以加载 Google 托管的库，并且可以正常工作： https://gist.github.com/106e8c4eb7483333aa08

（至少在 Chrome 和 Firefox 中）

【讨论】：

当我输入Jo 作为前两个字符时，我不想显示整个列表，而只显示John 和Joe（就像第一个示例中那样）。