2017-06-09 8 views
2

jQuery-UIで検索フィールドを自動完成しようとしていますが、ソースとしてPHPを使用する際に問題があります。変数をソースとして使用すると、すべてうまく動作します。jquery - PHPでオートコンプリート

JS:

$(function() { 
    var data = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 
    $("#tags").autocomplete({ 
     source: data 
    }); 
}); 

しかし、すぐに、私はそれだけで、配列を保持している場合でも、PHPスクリプトを使用して、それを符号化するよう、それはdoesntの。

JS:

$(function() { 
    $("#tags").autocomplete({ 
     source: 'suggest_search.php' 
    }); 
}); 

suggest_search.php:

$data = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 
echo json_encode($data); 

私は、なぜ任意の提案を把握カント?

編集:元の問題は解決され、リンクの問題に過ぎませんでした。

今私はSQLからデータを取得したいが、私は再びミスをしたところ、私が把握カント..

私phpcode:

<?php 
header('Content-Type: application/json'); 
include(scripts/db_connect.php); 
$searchTerm = filter_input(INPUT_GET, 'term'); 
$select = mysqli_query($db_mysqli, " SELECT * FROM $db_table WHERE top_name like '%$searchTerm%'"); 
while ($row=mysqli_fetch_array($select)) 
{ 
$data[] = $row['top_name']; 
} 
echo json_encode($data); 

と関連するHTMLコード:

<div id="ui-widget"> 
        <label for="tags"></label> 
        <input id="tags" class="search_field" type="search" name="suche" maxlength="255"> 
</div> 
+0

あなたはajax呼び出しを試して、それがどのように戻ってくるか見ることができますか?おそらく、変数にajaxの結果を保存する – srmeile

答えて

0

それは単純ではありません。理由は分かりませんが、ローカル配列にバインドすると単純な配列が機能しますが、リモートソースにバインドすると結果が必要になりますobの配列のこの構造体のjects:

{ 
    "id":"Tetrao tetrix", 
    "label":"Black Grouse", 
    "value":"Black Grouse" 
} 

は、この結果をチェックしてください私はthis pageから取られています

https://jqueryui.com/resources/demos/autocomplete/search.php?term=rou

私はに関連する何かを見つけることができませんでしたので、だからあなたの結果が動作するために、その構造と一致する必要がありますapi docsのデータ構造。

+0

is this json_encode()これを行う?私の配列をその構造に変換しますか? –

+0

@ whatever.idcはもちろんありません。どのように正しい構造を知るだろうか。また、あなたの配列は単なる配列です。オブジェクト(クラス)の配列が必要です。 – DontVoteMeDown

0

データソースファイルでJSONヘッダーを使用する必要があります。

<?php 
header('Content-Type: application/json'); 
$data = [ 
    "ActionScript", 
    "AppleScript", 
    "Asp", 
    "BASIC" 
]; 
echo json_encode($data); 

HTMLファイルの内容。

<html> 
<head> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
</head> 
<body> 

    <input id="tags"> 

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $("#tags").autocomplete({ 
      source: 'json.php' 
     }); 
    }); 
    </script> 

</body> 
</html> 
+0

動作しません:/ –

+0

警告またはエラーは何ですか? –

+0

コンソールを使用するように覚えてくれてありがとう。問題は、ソースファイルのパスをjsファイルに現実的に与えたことです。それは間違っていた - 私はそれをHTMLファイルに相対的に与える必要があります:/ –

関連する問題