質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

MySQLのデータを配列に格納し、jQueryUIのオートコンプリートで表示したい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,986

score 10

 前提・実現したいこと

お世話になります。
MySQLからデータを取得し、その内の1列を取り出して配列に格納後、
JQuery UIのautocompleteメソッドを使用したオートコンプリート機能で表示させたいと考えております。
イメージ説明

今回の場合は、name_jaの全項目をテキスト入力欄の候補として表示したいです。
しかし、一通りコードを組んでみても、候補が1つも表示されません。

 該当のソースコード

以下PHPはautocomplete-datasource.php内の記述となります。

<?php
$mysqli = new mysqli($sql_hostname, $sql_username, $sql_password, $sql_userdb_name);
if( $mysqli->connect_errno ) {
    echo $mysqli->connect_errno . ' : ' . $mysqli->connect_error;
}
$query = "SELECT `name_ja` FROM `class`";
$mysqli->set_charset('utf8');
$result = $mysqli->query($query);
while($ls = $result->fetch_array(MYSQLI_ASSOC)) {
    $list[] = $ls;
}
$mysqli->close();

$b = array();

if(isset($_POST['param1'])){
    $w = $_POST['param1'];
    foreach($list as $i){
        if(stripos($i, $w) !== FALSE){
            $b[] = $i;
        }
    }
    echo json_encode($b);
}
else{
    echo json_encode($b);
}
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
        $(document).ready( function() {
            $("#ac2").autocomplete({
                source: function(req, resp){
                    $.ajax({
                        url: "./autocomplete-datasource.php",
                        type: "POST",
                        cache: false,
                        dataType: "json",
                        data: {
                            param1: req.term
                        },
                        success: function(o){
                            resp(o);
                        },
                        error: function(xhr, ts, err){
                            resp(['']);
                        }
                    });

                }
            });
        });
    </script>

(中略)

<input type="text" id="ac2" name="class" class="form-control">

 試したこと

var_dump($list);を実行してみたところ、以下のように表示されました。

array(3) { [0]=> array(1) { ["name_ja"]=> string(11) "授業名01" } [1]=> array(1) { ["name_ja"]=> string(11) "授業名02" } [2]=> array(1) { ["name_ja"]=> string(11) "授業名03" } } 

$listをMySQLから取得したものではなく、array("01","02","03");などに変更すると、オートコンプリートが正常に動作するため、配列の問題であることまではわかりました。しかし、どこが問題なのかがわかりません…。
上記の01,02,03の場合のvar_dump($list);の出力結果は以下になります。

[]array(3) { [0]=> string(2) "01" [1]=> string(2) "02" [2]=> string(2) "03" } 

 補足情報(FW/ツールのバージョンなど)

PHP Version 7.2.7

初歩的な質問で恐縮ですが、何卒よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

似たようなことを考えてほぼほぼ似たような作りで作ったことがあるのですが、
以下の形で取れないですかね?

~前略
success: function(o){
  resp(o);
},
~後略

~前略
success: function(o){
  resp(o.success);
},
~後略

何れにせよoの中身を見てみると良いかもです。

追記

参考までに当方の方で動作が確認できているソースを記載しておきます。(MySQL、FuelPHP)

見当違いの回答だったっぽいので不要なコードは消し消し。
恐らく以下が問題になっているのではないかと。

if(isset($_POST['param1'])){
    $w = $_POST['param1'];
    foreach($list as $i){
        if(stripos($i, $w) !== FALSE){ //←ここ
            $b[] = $i;
        }
    }
    echo json_encode($b);
}
else{
    echo json_encode($b);
}

$listから取り出した要素$iarrayなので、
ここで$w(=$_POST['param1'])との比較に失敗してしまっていると考えられます。

コメントにも書きましたが以下のように変更すれば解消できるのではないでしょうか。

if(isset($_POST['param1'])){
    $w = $_POST['param1'];
    foreach($list as $i){
        if(stripos($i['name_ja'], $w) !== FALSE){ //←ここ
            $b[] = $i['name_ja'];
        }
    }
    echo json_encode($b);
}
else{
    echo json_encode($b);
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/25 15:06

    「o is not defined」ということはレコードの取得部分を返す部分で何か悪さをしているかもしれませんね…。
    該当部分以下のように変更して成功が出るようなら「autocomplete-datasource.php」自体は上手く言ってると思われます。
    success: function (o){
    if(!o.error){
    console.log("成功");
    resp(o);
    }
    }

    キャンセル

  • 2018/09/25 15:17

    ありがとうございます。参照元をMySQLのデータにした上で試したところ、「成功」は表示されませんでした…。
    先ほどと同じように参照元をarray()配列で試すと、表示されました。

    キャンセル

  • 2018/09/25 15:40

    今更ながら「var_dump($list)」取れている≒レコードの取得はできているようですので、
    「$list」を「$b」に詰め替えるところで問題が発生していると考えられますね。
    以下の部分が怪しいです。
    if(stripos($i, $w) !== FALSE){
     $b[] = $i;
    }
    「$i」が「$i['name_ja']」とかだったりしないですかね…?
    「$i」と「$w」をそれぞれ出力させて一致しているかどうか目視で確認してみるというのはどうでしょう。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る