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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

814閲覧

AjaxのAutocompleteでリンクを埋め込む

hosoken

総合スコア16

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/08/26 19:08

編集2018/08/28 21:53

PHP内でjQuery UIのAutocompleteを使用して、検索窓にtextで候補を表示することはできています。

やりたいことは、表示された候補にリンクを埋め込み、クリックとすると直接リンク先のページに遷移することです。
(イメージ的にはインスタの検索窓)

PHPからjava scriptに受け渡す値を<a href="~~">***</a>にすると、リンクが埋め込まれず、タグがそのまま表示されてしまいます。

何かいい方法はありますでしょうか?

よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/08/28 00:56

「jQuery UI」タグをつけてください
hosoken

2018/08/28 01:06

すみません、タグを追加しました。
guest

回答1

0

ベストアンサー

「遷移が出来ればいい」のであれば

・候補表示自体をカスタマイズするか
・別の方法で遷移させるか

のどちらかで対応できそうです。

まずは、autocompleteに渡すデータを、下記のようなオブジェクトになるよう変更します。

javascript

1// 移動先のURLを、オブジェクトに入れておきます。※ 下記では、mylinkの値がそれです。 2var data = [ 3{label: 'hoge', value: 'hoge', mylink: '/hoge.html'}, 4{label: 'hogehoge', value: 'hogehoge', mylink: '/hogehoge.html'}, 5{label: 'hogefuga', value: 'hogefuga', mylink: '/hogefuga.html'}, 6];

適用するテキストボックスがこうだとして

html

1<input type="text" id="TextBox" >

■ 候補表示自体をカスタマイズする

javascript

1$('#TextBox').autocomplete({ 2 source: data, 3}).autocomplete('instance')._renderItem = function(ul, item) { 4 return $( '<li>' ) 5 .append( '<a href="' + item.mylink + '">' + item.label + '</a>' ) 6 .appendTo( ul ); 7};

これで、<a>タグ付きの候補表示になるはず。。。
ただし、autocomplete本体側の処理や、cssの設定次第では、この<a>タグを正しくクリックできない可能性もあります(やってみないと出来るかは分からない!)ので、その場合は他の部分でも調整が必要になるかもしれません。

■ 別の方法・・・selectイベントを使って遷移させてみる

javascript

1$('#TextBox').autocomplete({ 2 source: data, 3 select: function(event, ui) { 4 location.href = ui.item.mylink; 5 return false; 6 } 7});

一番簡単そうなのがコレかなと思いました。
ただし、location.hrefの遷移ではダメな場合もあるかと思うので、その場合は仕様に沿って遷移の仕方を変えてくださいね。

※どちらも動作検証はしていないので、コードミス等ありましたら、ご容赦を。。^^;

投稿2018/08/27 08:54

mix-peach

総合スコア1910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hosoken

2018/08/27 21:49

ご回答ありがとうございます! 無事に「候補表示自体をカスタマイズする」で実装できました! ただ、javascript内でdataに値を入れて表示は出来ましたが、PHPからリストを取得して表示したく(最初の質問で言葉足らずで申し訳ありません)、PHPで連想配列にしたデータを(object)でキャストしてjavascriptに戻したら、全てのラベルの値がリスト化されてしまいました。 引き続き、お分かりになりましたらよろしくお願いします。
mix-peach

2018/08/28 02:57

phpからどのような形でデータを返却していますか? あと、javascript側の受け取り部分のコードも書いてもらえると、回答しやすくなるのですが、コードの提示は可能でしょうか?
hosoken

2018/08/28 21:54 編集

引き続き、ご回答ありがとうございます。 PHPは配列でjavascriptに渡していますが、色々調べて見るとJson形式で渡すのが正しいのかと感じています。 とはいえ、javascriptはあまり分からないので、よろしくお願いします。 /**php(cakephpを使用しています)*/ public function user(){  $user = ['label'=>'hoge','value'=> 'hoge','mylink'=> '/hoge.html'];  $this->viewClass = 'Json';  $this->set(compact('user'));  $this->set('_serialize','user'); } /**javascript*/ $('#ac_user').autocomplete({  source: '/ajax/user',  delay: 500,  minLength: 2 }).autocomplete('instance')._renderItem = function(ul, item) {  return $( '<li>' )  .append( '<a href="' + item.mylink + '">' + item.label + '</a>' )  .appendTo( ul ); };
mix-peach

2018/08/29 02:42 編集

そうですねー。 jsonでデータを渡せるようにできれば、javascript側はこれ以上の修正は不要だと思います。(autocmpleteがうまいことやってくれるはず・・!) php側から、試しに返却しているデータの形についてなのですが、 ↓これ。 $user = ['label'=>'hoge','value'=> 'hoge','mylink'=> '/hoge.html']; ['label'=>'hoge','value'=> 'hoge','mylink'=> '/hoge.html'] このひとまとまりで、1候補分のデータになりますよね。 で、この形のデータを「複数」渡される想定で、autocompleteは動きますので、 返却データが1つの場合でも、配列のようになっていないといけないので、 $user = [ ['label'=>'hoge','value'=> 'hoge','mylink'=> '/hoge.html'] ]; こんな感じのデータを、jsonデータにして返却すべきかと思われます。
hosoken

2018/09/02 15:39 編集

何度もありがとうございます! 確かに2次元配列だったのを勘違いして、普通の配列で渡していました。 ご指摘の通りのデータに修正して、解決しました。 本当に助かります。 最後にもう一つ、分かれば教えて頂きたいのです。 今の挙動は2文字以上入力したら候補を表示しますが、2文字以上入れた状態で、input以外の場所をクリックすると、inputには入力された文字だけが残り、候補は消えます。 その後、もう一度input欄をクリックしても、文字の入力がないと候補が表示されませんが、2文字以上の入力がされている状態で、クリックしただけでも候補を表示する事は可能でしょうか?
mix-peach

2018/09/03 05:52 編集

>2文字以上の入力がされている状態で、クリックしただけでも候補を表示する autocompleteの中にそのような機能がなさそうだった(みつけられなかった)ので、 少し無理やりな方法になっちゃいますが。。。 //テキストボックスにフォーカスが当たったら、とりあえずイベントを発生させる $('#TextBox').on('focus', function(){ $('#TextBox').triggerHandler('keydown'); }); autocompeteの機能が動くきっかけのイベント(keydownか、keypressが良いと思います)を発生させて、autocompeteが動くようにしているだけなので、特に入力文字数などは意識しなくていいと思います。 上記は、「click」だとtabキーなどで、入力欄を移動してきた場合に候補表示がされないので、「focus」にしましたが、「clickした時だけ」でいいのであれば $('#TextBox').on('click', 略); でも大丈夫だと思います。 (コメント投稿時のコードから、少しだけ修正しました。14:50)
hosoken

2018/09/04 09:46

ありがとうございました。出来ました! おかげさまでやりたい事が全て実装できました。 本当に感謝しかありません^^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問