テーブル表示[高機能版]
テーブルで検索フォームを表示します。
ほとんどのホームページで、レイアウト崩れを起こさずに表示できます。
テーブル表示(下記のHTMLを貼り付けてください)
<script> (function($){ function dispLoading(){ if($("#loading").size() == 0){ $(".searchresult").append("<div id='loading'>検索中...</div>"); } } function removeLoading(){ $("#loading").remove(); } $(document).on("submit", ".ajaxsearch", function() { $(".searchresult").text(""); dispLoading(); var request = $.ajax({ url: "https://www.seminar-portal.org/index.php/seminarsearch", type: "get", dataType: 'jsonp', jsonpCallback: "seminar", data: $(this).serialize(), timeout: 5000, }); request.done(function(result, textStatus, xhr) { if (result.num >=1) { // sort by date asc result.items.sort(function(a,b) { return (a.date < b.date ? -1 : 1); }); $.each(result.items, function(i, val) { textdata = $("<a></a>",{ href: val.url, text: val.title }); textlist = $("<p></p>").html(textdata).append("<br>会場: " + val.place + "<br>講師: " + val.mentor + "<br>日時: " + val.date + val.time); $('.searchresult').append(textlist); }); } else { $('.searchresult').text("合致するセミナーはありません。"); } removeLoading(); }); request.fail(function(xhr, textStatus, error) { $(".searchresult").text("接続できませんでした。しばらく待ってから、検索を実行してください。"); removeLoading(); }); return false; }); })(jQuery); </script> <style> .ajaxformtable { width: 300px; min-height: 80px; padding:5px; margin: 0 auto 5px auto; background-color: #ccddcc; border-radius: 6px; } .ajaxformtable th { text-align: center; } .ajaxformtable td { margin: 5px; vertical-align: top; } .ajaxformtable input { height: 30; } </style> <form action="" method="get" class="ajaxsearch"> <table class="ajaxformtable"> <tr> <th colspan="2"> <a href="https://www.seminar-portal.org/">名古屋セミナーポータル検索</a> </th> </tr> <tr> <td> タイトル </td> <td> <input type="text" name="keyword" class="text" placeholder="" value=""><!-- デフォルトの検索キーワードを設定する => value="検索キーワード" --> </td> </tr> <tr> <td> 会場 </td> <td> <input type="text" name="place" class="text" placeholder="" value=""><!-- デフォルトの会場を設定する => value="会場名" --> </td> </tr> <tr> <td> 講師名 </td> <td> <input type="text" name="name" class="text" placeholder="" value=""><!-- デフォルトの講師名を設定する => value="講師名" --> </td> </tr> <tr> <td> </td> <td> <input value="検索" type="submit" class="btn"> </td> </tr> <tr> <td colspan="2"> <div class="searchresult"></div> </td> </tr> </table> </form>
jQuery は読み込み済みの想定です。必要ならjQuery読み込み処理を行ってください。
jQueryを読み込むhtml
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
サンプルページ
テーブル表示のサンプル検索ページはこちらをごらんください。