Mojolicious :: Lite jQuery自動完成問題

自動完成不起作用：整個方法是錯誤的還是我只犯了一些錯誤？Mojolicious :: Lite jQuery自動完成問題

#!/usr/local/bin/perl 
use warnings; use 5.014; use utf8; 
use Mojolicious::Lite; 
use DBI; 
my $dbh = DBI->connect(...) or die $DBI::errstr; 
my $table = 'my_table'; 

get '/input' => sub { 
    my $self = shift; 
    $self->render('input'); 
}; 

get '/search_db' => sub { 
    my $self = shift; 
    my $col = $self->param('col'); 
    my $sth = $dbh->prepare("SELECT $col FROM $table"); 
    $sth->execute(); 
    my $ref; 
    while (my $row = $sth->fetchrow_arrayref()) { 
     push @$ref, @$row; 
    } 
    $self->render(json => $ref); 
}; 

app->start; 

__DATA__ 
@@ input.html.ep 
<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Test</title> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <script src="/js_local/development-bundle/jquery-1.6.2.js"></script> 
    <script src="/js_local/development-bundle/ui/jquery.ui.core.js"></script> 
    <script src="/js_local/development-bundle/ui/jquery.ui.widget.js"></script> 
    <script src="/js_local/development-bundle/ui/jquery.ui.position.js"></script> 
    <script src="/js_local/development-bundle/ui/jquery.ui.autocomplete.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#vorname").autocomplete({ 
       source: '/search_db?col=vorname', 
       minLength: 2 
      }); 
     }); 
    </script> 
</head> 
<body> 
<form> 
    <table> 
     <tr><td>Vorname:</td><td><input type="text" id="vorname" 
     name="vorname" autocomplete="off"/></td></tr> 
     <tr><td>Nachname:</td><td><input type="text" id="nachname" 
     name="nachname" autocomplete="on" /></td></tr> 
    </table><br /> 
    <input type="submit" value="OK"/> 
</form> 
</body> 
</html>

我想我是更進一步：現在在第二個字符後，我得到所有的名字作爲選擇出現。

來源

2011-09-09 sid_com

你在你的javascript控制檯中看到任何錯誤？ js文件的路徑是否正確？ – Geo

更改路徑。 –

好的，你的web服務器日誌中顯示了什麼？ – Geo

我已經找到了解決辦法：

#!/usr/local/bin/perl 
use warnings; 
use 5.014; 
use utf8; 
use Mojolicious::Lite; 
use DBI; 

my $table = 'my_table'; 
my $dbh = DBI->connect(...) or die $DBI::errstr; 

get '/eingabe' => sub { 
    my $self = shift; 
    $self->render('eingabe'); 
}; 

get '/search_db/:col' => sub { 
    my $self = shift; 
    my $col = $self->param('col'); 
    my $term = $self->param('term'); 
    my $sth = $dbh->prepare( 
        "SELECT DISTINCT $col FROM $table WHERE $col LIKE ?" 
      ); 
    $sth->execute($term . '%'); 
    my $ref; 
    while (my $row = $sth->fetchrow_arrayref()) { 
      push @$ref, @$row; 
    } 
    $self->render(json => $ref); 
}; 

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() { 
      var data = []; 
      var form = document.forms[0]; 
      var formEls = form.elements; 
      var elLen = formEls.length; 
      for (var i = 0; i < elLen; ++i) { 
       if (formEls[i].type != 'submit') { 
        data.push(formEls[i].id); 
       } 
      } 
      var dLen = data.length; 
      for (i = 0; i < dLen; i++){ 
       $("#" + data[i]).autocomplete({ 
        delay: 100, 
        minLength: 2,         
        source: '/search_db/' + data[i] 
       }); 
      } 
     }); 
    </script> 
</head> 
<body> 
    <form> 
     <table> 
      <tr><td>Vorname:</td><td><input type="text" id="vorname" 
      name="vorname" autocomplete="off" autofocus="on" /></td></tr> 
      <tr><td>Nachname:</td><td><input type="text" id="nachname" 
      name="nachname" autocomplete="on" /></td></tr> 
     </table><br /> 
     <input type="submit" value="OK"/> 
    </form> 
</body> 
</html>

來源

2011-09-09 13:53:16

你有一個額外的逗號的minLength後：

$(function() { 
    $("#vorname").autocomplete({ 
     source: '/search_db?col=vorname', 
     minLength: 2, 
    }); 
});

嘗試，對於一個開始！

來源

2011-09-09 08:20:18

刪除示例中的逗號 –

我沒有看到你在哪裏申報$table？從命令行運行你的兩個腳本我得到了：

Global symbol "$table" requires explicit package name at mojo_test2.pl line 19. 
mojo_test2.pl had compilation errors.

來源

2011-09-09 13:57:57

添加了表格聲明。 –

@sid_com：否則它適用於我，死於'死亡'...... –

Mojolicious :: Lite jQuery自動完成問題

回答

相關問題