PHPとajaxによる検索について

検索機能の作り方で困ったので質問させていただきます。

現在、PHPとMySQLとajaxで検索機能を作っています。

仕様としましては、リアルタイムに検索結果を出したかったので、検索項目を用意しチェックなどをしたらその場で結果が出るような造りになっています。

リアルタイムなので、ajaxを複数使い、そして、その複数のajax間でデータのやり取りをしたかったので、PHPのSESSIONを使いデータの受け渡しをしています。
ある条件を満たす(例えば、GETで「Search=on」を取得する)と検索プログラムが起動し、各項目を取得します。

if ($_GET["Search"] == "on") {
    // 条件が満たされた場合
}

そして、その項目を取得した場合、SESSIONと検索結果を残したかったのでGETパラメータを保存し、その取得した条件でデータベース内を検索し、ヒットしたデータを返しページに反映し、URLにパラメータを反映するような流れとなっています。

if ($_GET["Search"] == "on") {
    //GETで取得した場合
    if ($_GET["検索項目1"]) {
        //セッションとパラメータに保存
        $_SESSION["検索項目1"] = $param["検索項目1"] = $_GET["検索項目1"];
    //SESSIONにデータが保存されている、且つ検索ボタンが押されなかった場合
    } else if (!$_GET["検索ボタン"] and $_SESSION["検索項目1"]) {
        //パラメータに保存
        $param["検索項目1"] = $_SESSION["検索項目1"];
    //ボタンは押されたがGETが空の場合
    } else {
        //SESSION初期化
        $_SESSION["検索項目1"] = "";
    }
}
//この後、MySQLで検索、URLにパラメータ反映

また、上記の条件を満たさない(「Search=on」を取得しなかった)場合は、検索結果のSESSIONを初期化し、次に検索条件を満たした場合に引き継がないような仕様にしています。

しかし、この仕様だとページは違うページだが、検索条件を満たしてしまう場合は条件が引き継がれてしまい、本当は初期化しないといけないのにその引き継いだ条件で検索してしまいます。

ページ①：Search=on
↓ //移動
ページ②：Search=on //初期化されず引き継いでしまう

各ajax間に検索した項目を引き継ぎ、URLに前の結果も引き継がれるようにしたかったのでSESSIONを使っています。

この機能を止めればいいのですが、理想の検索がこの仕様なので、どうかできないか悩んでいます。
何か良い方法はないでしょうか。

また、この仕様だと何か他に問題が出てくるでしょうか。

皆様のご意見をお聞かせください。

■追記(2016/06/02)
ajax側のプログラムは、項目ごとに設定したボタンを押すとそれに応じたチェックボックスが起動します。
(例えば、都道府県の項目で選択を押した際には、都道府県を選択できるようなajaxが起動)

ボタンを押した初期起動は、関東や関西など大エリアを選ぶことのできるチェックボックスを生成し返します。

//ajax内(例：都道府県)
//初期起動
if ($_GET["Area"] == 1) {
    //関東や関西などの大エリアチェックボックスを返す
}

次に、任意の大エリアを選択すると、それに応じた都道府県を返します。

//ajax内(例：都道府県)
//初期起動
if ($_GET["Area"] == 1) {
    //関東や関西などの大エリアチェックボックスを返す
} else if ($_GET["Area"] == 2) {
    //大エリアに応じた都道府県のチェックボックスを返す
}

次に、都道府県を選択すると、それに応じた市区町村を生成し、返します。

//ajax内(例：都道府県)
//初期起動
if ($_GET["Area"] == 1) {
    //関東や関西などの大エリアチェックボックスを返す
} else if ($_GET["Area"] == 2) {
    //大エリアに応じた都道府県のチェックボックスを返す
} else if ($_GET["Area"] == 3) {
    //都道府県に応じた市区町村のチェックボックスを返す
}

複数あるajaxは上記のような造りになっており、一度検索し、再度検索する際に以前の情報を保存するために、取得した情報をSESSIONで保存しています。
そして、その情報があった際は初期起動の際に処理を行っています。

//ajax内(例：都道府県)
//初期起動
if ($_GET["Area"] == 1) {
    //再検索の際に以前の情報があった場合はそれを再構築する
    if ($_SESSION["エリア①"]) {
        //以前の情報を再構築
    } else if ($_SESSION["エリア②"]) {
        //以前の情報を再構築
    } else if ($_SESSION["エリア③"]) {
        //以前の情報を再構築
    }
    //関東や関西などの大エリアチェックボックスを返す
    //検索条件を保存
    $_SESSION["エリア①"] = $_GET["エリア①"];
} else if ($_GET["Area"] == 2) {
    //大エリアに応じた都道府県のチェックボックスを返す
    //検索条件を保存
    $_SESSION["エリア②"] = $_GET["エリア②"];
} else if ($_GET["Area"] == 3) {
    //都道府県に応じた市区町村のチェックボックスを返す
    //検索条件を保存
    $_SESSION["エリア③"] = $_GET["エリア③"];
}

あとは、任意のチェックボックスにチェックし検索ボタンが押されると上記で説明したプログラムにデータが受け渡され検索を開始します。

よろしくお願いします。

■再追記(2016/06/02)
すみません、ajax側のコードを追加しておりませんでした。

ますは、初期起動のコードです。

//初期起動ajax
$("エリア選択ボタン").on("click", function() {
	$.ajax({
		url : "hoge.php",
		type : "get",
		dataType : "json",
		scriptCharset: 'utf-8',
		data: {
			Area: 1
		},
		success : function(data){
			$("#チェックボックス表示ボックス").remove();
			$("#チェックボックス表示ボックス").append(data["tmp"]);
		},
		error: function(XMLHttpRequest, textStatus, errorThrown){
			//エラー処理
   		}
	});
});

次にチェックボックスにチェックした際のコードです。

$("エリア①").live("change", function() {
	var Area1 = $('["エリア①"]:checked').map(function(){
		return $(this).val()
	}).get().join(',');
	var Area2 = $('["エリア②"]:checked').map(function(){
		return $(this).val()
	}).get().join(',');
	var Area3 = $('["エリア③"]:checked').map(function(){
		return $(this).val()
	}).get().join(',');

	$.ajax({
		url : "hoge.php",
		type : "get",
		dataType : "json",
		scriptCharset: 'utf-8',
		data: {
			Area : 1,
			Area1: Area1,
			Area2: Area2,
			Area3: Area3
		},
		success : function(data){
			$("#大エリアボックス").remove();
			$("#大エリアボックス").append(data["エリア①"]);
			if (data["エリア②"]) {
				$("都道府県ボックス").remove();
				$("都道府県ボックス").append(data["エリア②"]);
			}
		},
		error: function(XMLHttpRequest, textStatus, errorThrown){
			//エラー処理
   		}
	});
});
//都道府県、市区町村も同じようなコード

この後に、検索ボタンを押すと、上記のようにエリアデータを収集し、検索プログラムへデータを渡します。

よろしくお願いします。

kei344

2016/06/01 09:50

ajax側のコードを提示することは可能でしょうか？

kei344

2016/06/02 02:46

JavaScript に $_GET変数 $_SESSION変数は無いと思うのですが、出力されたHTMLとJavaScriptを提示いただくことは可能でしょうか。

melon910

2016/06/02 03:19

>>kei344 様すみません、PHPコードと勘違いしておりました。追加が完了致しました。よろしくお願い致します。

退会済みユーザー

2016/06/02 03:33

目的がよく読み取れません。最終的にどのような画面（インターフェイス）を作りたいのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

大区分、都道府県と市町村を順に絞り込んだ上で、キーワードなどでの検索が有り、絞り込み状態を保存したまま再検索する、というような挙動でしょうか。

ex) 1回目の検索
大区分 ⇒ 北海道, 九州
都道府県 ⇒ 北海道, 沖縄
市区町村 ⇒ 稚内市, 石垣市
検索キーワード ⇒ 最南端

ex) 2回目の検索
大区分 ⇒ 北海道, 九州 // ここをセッションで保存
都道府県 ⇒ 北海道, 沖縄 // ここをセッションで保存
市区町村 ⇒ 稚内市, 石垣市 // ここをセッションで保存
検索キーワード ⇒ 最北端

セッションをどういう意図で使っているのかがいまいちわかりませんが、書かれている内容であればセッションを使う必要性は低いと思います。ajaxで画面遷移なしで検索を行っているのだから、ページ内に変数を保持するか毎回取得し、全キーワードを送ったほうが手早い気がします。

※ 下記コードは「こういう方向性」くらいな気分で書いているのでこのまま動作するわけでは有りません。

JavaScript
1$( 'form' ).on( 'click', 'select, input', function() {
2	var form_data = {}
3	  , $_this = $( this )
4	  , id = $_this.attr( 'data-flag' )
5	  ;
6	
7	// クリックした要素がどれか
8	if ( id === '大区分' ) {
9		// 大区分なら都道府県を消しておく
10	} else if ( id === '.都道府県' ) {
11		// 都道府県なら市区町村を消しておく
12	} else if ( id === '市区町村' ) {
13		
14	} else if ( id === '検索キーワード' ) {
15		
16	} else {
17		
18	};
19	var $a = $( 'form' ).find( '#大区分:checked' )
20	  , $b = $( 'form' ).find( '.都道府県:checked' )
21	  , $c = $( 'form' ).find( '.市区町村:checked' )
22	  , $d = $( 'form' ).find( '#検索キーワード' )
23	  ;
24	if ( $a.length ) { form_data[ '大区分'   ] = $a.val(); }; // 選択されていないとnullが入るはず。
25	if ( $b.length ) { form_data[ '都道府県' ] = $b.map( function() { return $(this).val(); } ).get().join( ',' ); };
26	if ( $c.length ) { form_data[ '市区町村' ] = $c.map( function() { return $(this).val(); } ).get().join( ',' ); };
27	if ( $d.length ) { form_data[ '検索キーワード' ] = $d.val(); };
28	/* { // ex)
29		  '大区分' : '北海道, 九州'
30		, '都道府県' : '北海道, 沖縄'
31		, '市区町村' : '稚内市, 石垣市'
32		, '検索キーワード' : '最南端'
33	}; */
34
35	$.ajax( {
36		  url : 'hoge.php'	// '大区分' だけ入っていたら都道府県のデータを返し、それ以降が入っていたらそれぞれ返すものを変えるようにhoge.phpを構成する
37		, type : 'get'
38		, dataType : 'json'
39		, scriptCharset : 'utf-8'
40		, data : form_data
41		, success : function( data ){
42			if ( data[ 'type' ] === '大区分' ) {
43				// 都道府県部分を書き換え
44			} else if ( data[ 'type' ] === '都道府県' ) {
45				// 市区町村部分を書き換え
46			} else if ( data[ 'type' ] === '市区町村' ) {
47				// 処理
48			} else if ( data[ 'type' ] === '検索キーワード' ) {
49				// 処理
50			} else {
51				// 処理
52			};
53		  }
54		, error: function( XMLHttpRequest, textStatus, errorThrown ) {
55			//エラー処理
56		  }
57	} );
58} );

HTML
1<form action="" method="post">
2
3	<label for="area">大区分:</label>
4	<select name="大区分" id="大区分" multiple="multiple">
5		<option value=""></option>
6		<option value="北海道">北海道</option>
7		<option value="九州">九州</option>
8	</select>
9
10	<label>都道府県:</label>
11	<div id="都道府県">
12		<label><input type="checkbox" class="都道府県" value="01">北海道</label>
13		<label><input type="checkbox" class="都道府県" value="47">沖縄</label>
14	</div>
15
16	<label>市区町村:</label>
17	<div id="市区町村">
18		<label><input type="checkbox" class="市区町村" value="01214">稚内市</label>
19		<label><input type="checkbox" class="市区町村" value="47207">石垣市</label>
20	</div>
21
22	<label>検索キーワード:</label>
23	<div id="検索キーワード">
24		<label><input type="text" id="検索キーワード" value=""></label>
25	</div>
26</form>

投稿2016/06/02 16:33

kei344

総合スコア69398

セッションはとりあえずDBアクセスを減らすのが目的なんでしょうかね…。

例にあるような、取得する内容が「地域」「都道府県」ならセッションを利用するのはちょっと違うかな。
アクセスしたユーザーによって返す値が変わるわけじゃないので。
どういうことかというと、「どんなユーザーが利用しても、選んだ地域が同じなら返す値も同じ」はずだからです。

php
1<?php
2$arrArea = ["---- 地域 ----", "北海道", "東北"];
3$selected_area = filter_input(INPUT_POST, 'area');
4$selected_pref = filter_input(INPUT_POST, 'pref');
5?><!DOCTYPE HTML>
6<html lang="ja">
7	<head>
8		<meta charset="UTF-8">
9		<title></title>
10	</head>
11	<body>
12		<form action="" method="post">
13
14			<label for="area">地域:</label>
15			<select name="area" id="area">
16				<?php foreach ($arrArea as $key => $area): ?>
17					<?php
18					printf('<option value="%d"%s>%s</option>'
19						, $key
20						, ($selected_area == $key) ? ' selected' : ''
21						, $area
22					);
23					?>
24				<?php endforeach; ?>
25			</select>
26
27			<label for="pref">都道府県:</label>
28			<select name="pref" id="pref">
29				<option value="">---- 都道府県 ----</option>
30			</select>
31
32			<div id="checkboxes_pref">
33
34			</div>
35		</form>
36		<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
37		<script type="text/javascript">
38			$(function () {
39				$("#area").on('change', function () {
40					var url = 'get_pref.php';
41					var params = {
42						area: $(this).val()
43					};
44
45					// selectbox
46					$("#pref").empty()
47							.append($("<option>").val('0').text('---- 地域 ----'));
48
49					// checkboxes
50					$("#checkboxes_pref").empty();
51
52					if (0 < $(this).val()) {
53						$.getJSON(url, params, function (json) {
54							$.each(json, function (i, res) {
55
56								// selectbox
57								$('<option>').val(i).text(res)
58										.appendTo($("#pref"));
59
60								// checkboxes
61								var label = $('<label>');
62								$('<input>').prop('type', 'checkbox').val(i)
63										.appendTo(label);
64								label.append(res).appendTo($("#checkboxes_pref"));
65							});
66						});
67					}
68				});
69			});
70		</script>
71	</body>
72</html>

get_pref.php

php
1<?php
2
3/**
4 * get_pref.php
5 */
6$arrPref = [
7	0 => []
8	, 1 => ['01' => '北海道']
9	, 2 => ['02' => '青森', '03' => '岩手', '04' => '秋田', '05' => '宮城', '06' => '山形', '07' => '福島']
10];
11
12$area = filter_input(INPUT_GET, 'area');
13echo json_encode($arrPref[$area]);
14