PHP内でjQuery UIのAutocompleteを使用して、検索窓にtextで候補を表示することはできています。
やりたいことは、表示された候補にリンクを埋め込み、クリックとすると直接リンク先のページに遷移することです。
(イメージ的にはインスタの検索窓)
PHPからjava scriptに受け渡す値を<a href="~~">***</a>にすると、リンクが埋め込まれず、タグがそのまま表示されてしまいます。
何かいい方法はありますでしょうか?
よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/28 01:06
回答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
総合スコア1910
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/27 21:49
2018/08/28 02:57
2018/08/28 21:54 編集
2018/08/29 02:42 編集
2018/09/02 15:39 編集
2018/09/03 05:52 編集
2018/09/04 09:46
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。