web-dev-qa-db-ja.com

jqueryuiオートコンプリートとデータベース

私はJQueryにかなり慣れておらず、おそらく初心者にとっては少し難しいかもしれない何かを達成しようとしています。ただし、現在の値をPHPスクリプトに送信し、必要な値を返すオートコンプリートを作成しようとしています。

これが私のJavascriptコードです

$("#login_name").autocomplete({
    source: function(request, response) {
 $.ajax({
     url: "http://www.myhost.com/myscript.php",
     dataType: "jsonp",

     success: function(data) {
  alert(data);
  response($.map(data, function(item) {
      return {
   label: item.user_login_name,
   value: item.user_id
      }
  }))
     }
 })
    },
    minLength: 2
});

そしてこれが「myscript.php」の後半です

while($row = $Database->fetch(MYSQLI_ASSOC))
{
    foreach($row as $column=>$val) 
    {
        $results[$i][$column] = $val;
    }
    $i++;
}
print json_encode($results);

次の出力が生成されます

[{"user_id":"2","user_login_name":"Name1"},{"user_id":"3","user_login_name":"Name2"},{"user_id":"4","user_login_name":"Name3"},{"user_id":"5","user_login_name":"Name4"},{"user_id":"6","user_login_name":"Name5"},{"user_id":"7","user_login_name":"Name6"}]

どこが間違っているのか誰か教えてもらえますか？かなりイライラし始めています。入力ボックスが「白」に変わり、オプションは表示されません。値の配列を指定すると、コードは機能します。

[〜＃〜] update [〜＃〜]コードをに変更しましたが、まだ運がありません。

$("#login_name").autocomplete({
    source: "/ajax/login_name.php",
    dataType: "json",
    minLength: 2,
    cache: false,
    select: function(event, ui) {
        alert(ui);
    }
});

FireFoxのWeb開発ツールを使用すると、「bはnullです」というエラーが表示されます。

phpjqueryjsonuser-interfaceautocomplete
18
bigstylee

ついに私のニーズに合った解決策を見つけました

$("#login_name").autocomplete({
  source: function(request, response){
    $.post("/ajax/login_name.php", {data:request.term}, function(data){     
        response($.map(data, function(item) {
        return {
            label: item.user_login_name,
            value: item.user_id
        }
        }))
    }, "json");
  },
  minLength: 2,
  dataType: "json",
  cache: false,
  focus: function(event, ui) {
    return false;
  },
  select: function(event, ui) {
    this.value = ui.item.label;
    /* Do something with user_id */
    return false;
  }
});
19
bigstylee

いくつかの提案：

  1. なぜ_dataType= "jsop"_？ jsonpではないようです。 「json」が欲しいと思います。
  2. オプションにも_cache : false_を挿入します。これにより、リクエストは常に行われ、ブラウザ側のキャッシュからは決して満たされません。
  3. fiddlerやCharlesなどを使用して、通話が発信されているかどうかを確認します。
  4. あなたの成功fnは呼ばれますか？そこにalert()があります。呼び出されますか？
  5. firebugまたはIE8開発者ツールを使用している場合は、alert()にブレークポイントを設定して、パラメーターの値を確認できます。
  6. URLに完全なホスト名を指定するのはなぜですか？昨夜、ページとAjaxリクエストに別のホスト名を使用したときに、応答がnull、空の文字列であるオートコンプリートという奇妙な状況が発生しました。同じホスト名を使用するように変更すると、リクエストは成功しました。実際には、同一生成元ポリシーのため、ajax呼び出しのURLにはホスト名をまったく含めないでください。
4
Cheeso

他の誰かがそれを必要とする場合：

JQuery UIのオートコンプリートのドキュメントでは、使用するクエリ文字列パラメーターは「term」であり、「q」ではないと指定されています...または少なくとも現在はそうです。

E.g. http://www.myhost.com/myscript.php?term=someToSearchFor
2
CodeReaper

はい、jsonのヘッダー情報が必要です

        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
        header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
        header("Cache-Control: no-cache, must-revalidate" ); 
        header("Pragma: no-cache" );
        header("Content-type: text/x-json");

そして tvanfosson プラグに隣接する良い点を作ります

いずれにせよ、プラグインがajax呼び出しを行うとは思わない。

実際に jquery-ui autocomple を使用している場合は、ドキュメントを読んで基本バージョンを実行する必要があります。ヘッダーデータがないことを除けば、PHPは問題ありません。

2
mcgrailm

必要な人のためのシンプルなJqueryuiオートコンプリート。

//select data from the table
$search = $db->query('SELECT Title from torrents');

//then echo script tags and variables with php
<?php echo '<script type="text/javascript">
 $(function() {
  var availableTags = [';
 foreach ($search as $k) {
  echo '"'.$k['Title'].'",';
}
  echo '];
$( "#tags" ).autocomplete({
  minLength:2, //fires after typing two characters
  source: availableTags
});
});
</script>';

 ?>

あなたのhtmlフォーム

<div id="search">
<form id="search-form">
<input id="tags" type="text" />
<input type="submit" value="Search" />
</form>
</div>
1
TenTen Peter

JSON構造はフラットな文字列ですが、 map は配列または配列のような構造を想定しています。マップを使用する前に、文字列でjsonデコードを試してください。

0
pinaki

私もあなたのような問題を抱えていました。そして今、私はそれを修正します。問題は、サーバーから返されるjsonに構文エラーが含まれていることです。

In http://api.jquery.com/jQuery.getJSON/ は、JSONにエラーがあると、サイレントに失敗することを示しています。 JSONはここのJSON標準と一致する必要があります http://json.org/ 。

私のエラーは、JSONの文字列が1つの引用符で囲まれていることです。ただし、JSON標準では、二重引用符で囲む文字列のみが受け入れられます。

例えば。 「HelloWorld」ではなく「HelloWorld」

修正すると、ソースを文字列URLとして設定できます。用語は「term」クエリ文字列になります。そしてそれは動作します!!

0
panawat wongkleaw