1

これを試してみると、期待どおりに動作します。2 文字の後に、一致するエントリが表示されます。

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

これは動作が異なります: 2 つの文字の後、常にすべてのエントリが表示されますか?
2 番目の例の何が問題になっていますか?

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

2 に答える 2

1

最初の例では、配列を使用してオートコンプリートのオプションを設定しています。2 番目の例では、配列が json にシリアライズされていますが、オートコンプリートでは、json に特定のキーと値のペア (id、ラベル、および値) があることが想定されています。

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
    }
})
于 2011-09-09T18:04:34.717 に答える
1

あなたの例には何も問題はないと思います。それは完全に機能します。ただし、JS を正しいパスからロードしていることと、正しい URL を試していることを確認してください: http://127.0.0.1:3000/eingabe

Google がホストするライブラリをロードするように例を変更しましたが、うまくいきました: https://gist.github.com/106e8c4eb7483333aa08

(少なくとも Chrome と Firefox では)

于 2011-09-09T19:01:03.680 に答える