Home/ Questions/Q 6558331
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T13:11:11+00:00

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

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
    }
})
    • 0