How to I get the right json-datatype for the autocomplete function?

问题

When I try this, it works as expected: after two characters its shows the matching entries.

<!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>

This behaves different: after two characters it shows always all entries?
What is wrong with the second example?

#!/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>

回答1:

In your first example you are using an array to set the options of the autocomplete. In the second the array is being searilizied into json, however the autocomplete expects the json to have specific key/value pairs (id, label, and value).

I think your best bet would be to define a custom callback for the autocomplete's data as shown in this tutorial from nettuts.

Your autocomplete code would look something similar to this:

$("#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
    }
})

回答2:

I think nothing is wrong wrong with your example, it works perfectly. But please make sure you are loading your JS from right path and that you are trying right url: http://127.0.0.1:3000/eingabe

I modified your example to load Google hosted libraries and it's just works: https://gist.github.com/106e8c4eb7483333aa08

(at least in Chrome and Firefox)

来源：https://stackoverflow.com/questions/7365515/how-to-i-get-the-right-json-datatype-for-the-autocomplete-function

标签

jquery

json

perl

autocomplete

mojolicious