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