Как получить правильный тип данных json для функции автозаполнения? - PullRequest
Новая
       9

Как получить правильный тип данных json для функции автозаполнения?

1 голос
/ 09 сентября 2011

Когда я пытаюсь это сделать, он работает как положено: после двух символов он показывает совпадающие записи. 

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

Это ведет себя иначе: после двух символов всегда отображаются все записи?
Что не так со вторым примером? 

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

Ответы [ 2 ]

1 голос
/ 09 сентября 2011

Я думаю, что с вашим примером все в порядке, все работает отлично. Но, пожалуйста, убедитесь, что вы загружаете свой JS с правильного пути и что вы пытаетесь правильно URL: http://127.0.0.1:3000/eingabe

Я изменил ваш пример для загрузки размещенных в Google библиотек, и он просто работает: https://gist.github.com/106e8c4eb7483333aa08

(по крайней мере, в Chrome и Firefox)

1 голос
/ 09 сентября 2011

В первом примере вы используете массив для установки параметров автозаполнения.Во втором случае массив ищется в json, однако автозаполнение ожидает, что json будет иметь определенные пары ключ / значение (id, label и value).

Я думаю, что вам лучше всего определить собственный обратный вызов для данных автозаполнения, как показано в этого урока из 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
    }
})
...