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/j开发者_如何学Goquery.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
}
})
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)
加载中,请稍侯......
精彩评论