cakephpでオートコンプリート機能

Question

Cakephpでオートコンプリート機能を実装したいと思っていますが、
全く実装できない状況です。

具体的な内容を記載していませんでした。

下記サイトを参考して、
http://wataame.sumomo.ne.jp/archives/7190

1.jQueryとjQuery UIを読み込みました。

2.フォームの作成

<?php echo $this->Form->input('name', array(
    'type' => 'text',
    'id' => 'autocomplete',
)); ?>

3.Javascriptの読み込み

<script>
$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
     
    $("#autocomplete").autocomplete({
        source: availableTags,
        autoFocus: true,
        delay: 500,
        minLength: 1
    });
});
</script>

1~3までの手順を実施して問題なく、指定のフォームに
Javascriptのリストがフォームの下に表示され選択できるようになりました。

4.Javascriptの変更
3.の内容を下記に変更

<script type="text/javascript">
$(function(){
    $('#autocomplete').autocomplete({
        source: '<?php echo $this->Html->url(array('controller' => 'testA', 'action' => 'autocomplete')); ?>',
        autoFocus: true,
        delay: 500,
        minLength: 2
    });
})
</script>

**5.コントローラーの作成 **
こちらはこのURLを参考にしました。
https://teratail.com/questions/18856

    $this->loadModel('testB');
    $field = 'name';
    $term = $this->params['url']['term'];

    $condition = array();
    if(!empty($term)){
        $condition = array('testB.'.$field.' like' => "%".$term."%");
    }

    $query = array(
        'fields' => array($field),
        'conditions' => $condition,
        'limit' => 10,
        'order' => array('testB.'.$field => 'ASC'),
        'group' => $field,
    );

    $data = array();
    $items = $this->testB->find('all', $query);

    foreach ($items as $item) {
        $cnt = array_push($data, $item['testB'][$field]);
    }

    // JSONデータのみを返す
    $this->viewClass = 'Json';
    $this->set(compact('data'));
    $this->set('_serialize', 'data');
}

jsonの値を確認。
下記のURLから
http://localhost:8888/cakephp/test/autocomplete?term=

このデータが返ってきました。
[
"aaaaaa",
"test",
]

データベースの中身を取得できている。と思います。。おそらく。。。

6.フォームの確認
指定したフォームにaと入れてもリストが表示されません。

どこかで値がちゃんと渡されていないのでしょうか。

ご指摘していただけますでしょうか。
よろしくお願い致します。

Comments

[TaMaMhyu]

具体的にどのようにしたのかと、結果どうなったのか、を示したほうが良いかと思います。

[atsupoooon]

ご指摘ありがとうございました。
内容を変更いたしました。

Answer 1

４の「Javascriptの変更」のところですが、ブラウザでソースを見てsourceに意図したURLが入っていますか？
また、Modelが「testB」となっていてControllerには「testA」とありますが、このあたりは大丈夫でしょうか。

Comments

[atsupoooon]

ご指摘ありがとうございます。

４の「Javascriptの変更」のところですが、ブラウザでソースを見てsourceに意図したURLが入っていますか？

>>>>>>>>下記のようになっております。
<script type="text/javascript">
$(function(){
$('#autocomplete').autocomplete({
source: '/builds/autocomplete',
});
})
</script>
>>>>>>>

また、Modelが「testB」となっていてControllerには「testA」とありますが、このあたりは大丈夫でしょうか。
>>>>>すべてtestBやすべてtestAとしても
また、testAとtestBを入れ替えてもだめでした。
jsonはこちらのURLから確認できますが、
フォームのリストが全く表示されませんでした。

やりたい動作は、
testAのページからtestBのデータベースの中身(nameのフィールドのみ)を
オートコンプリート機能のリストとして表示させたいです。

一様この方法も試しました。
コントローラーを以下に変更して試しました。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
public function autocomplete(){
$result = array(
['id' => '1', 'value' => 'item1'],
['id' => '2', 'value' => 'item2'],
['id' => '3', 'value' => 'item3'],
);
$this->viewClass = 'Json';
$this->set(compact('result'));
$this->set('_serialize', 'result');
}
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

上記の内容に変更してリストが表示できませんでした。

[jinco]

「jsonはこちらのURLから確認できます」とのことですが、このページでデータがjson形式で表示されているのであれば、そのURLを直接Javascriptのsource部分に書いてみると動きませんか？

$('#autocomplete').autocomplete({
source: 'ここにそのURLを入力。PHPは使わずにベタ打ち',

[atsupoooon]

しっかりと動作しました！！！！
ベタ打ちでいけました。
夜分遅くまでご指摘したいただきありがとうございます。

１つお伺いしてもよろしいですか？
なぜ、ベタ打ちでは動くのでしょうか？

パスはあっていると思いますが。。。

[jinco]

遅くなってすみません。おそらくphpで出力したパスのどこかが間違っているのだと思います。