【Ajax・php・javascript】インクリメント検索を実装する - 新卒から文系エンジニア→人材業界に転職した人のブログ

【今回の内容】

インクリメント検索の実装したので、その紹介ををしまーす

内容としては、テキストボックスへの入力一文字ごとに

　　　　　　　ＤＢにある値に対し、検索を実行し、その結果を表示するというもの。

処理の内容としては、

一文字ごとに検索文字を提案してくるグーグル検索のグーグルsugestと同じようなこと

だと思います。

【処理の流れ】

処理の流れ

①テキストボックスへの入力に対し、一文字ごとにイベントを拾う

②イベントたびにテキストボックスの値を取得

③取得した値をajaxにより、phpに渡す

④phpでＤＢにパラメータを含むSQLを発行する（like文）

⑤ＤＢから取得した値をxmlに変換

⑥xmlをjavascrptに渡す

⑦javascrptによりＤＯＭ構造を利用して、table要素に結果を流し込む

「わかったこと」

・テキスト入力イベントにも種類があること

インクリメント検索を実装するにあたって、テキストボックス入力に関するイベントを調べたわけだが、
思いのほかはたくさんあった。

　☆oninput :一文字入力ごとにイベントが発生する

　　onchange:入力している値が変更され、フォーカスが離れたらイベントが発生する

　　onFucus :フォーカスが当たった時にイベントが発生する

onblur　 :フォーカスを失ったときにイベントが発生する

「実装の感想」

実装の感想として、

前回のAjaxのメリットを含めて復習を経て

インクリメント検索は、Ajaxのメリットをフルに生かしている実感しました。

その理由として、

・Ajaxのメリットである同一ページ内の部分更新によって早いレスポンスで外部データ（今回はＤＢのデータ）

　を取得しページ内に表示できるから。
　

【参考ソース】

<h3>検索</h3>
			<span>絞り込み検索：</span><input type="text" value="" id="serch_text" oninput="serch_name(this.value)">
			<div id="serch_result2">
			</div>

function serch_name(value){
 
	var send_value1=value;
	var url="serch_name.php";
	var httpobj =createHttpRequest();
	httpobj.onreadystatechange = function() {
  		if (httpobj.readyState == 4) {
  			result_value=httpobj.responseXML;
  			serch_output2(result_value);
  			}
			};

		httpobj.open("POST",url);
		httpobj.setRequestHeader('Pragma', 'no-cache');
		httpobj.setRequestHeader('Cache-Control', 'no-cache');
		httpobj.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
		httpobj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		httpobj.send("send_value="+send_value1);
}

function serch_output2(xmldate){

var div_serch_result=document.getElementById("serch_result2");

if(div_serch_result.hasChildNodes){
		div_serch_result.removeChild(div_serch_result.firstChild);
}
var table=document.createElement("table");
var tbody=document.createElement("tbody");

var nodelist=xmldate.getElementsByTagName('list');

	for(var i=0;i<nodelist.length;i++){
	var row=document.createElement("tr");
	
<!--ＤＢ取得データをテーブルobjに流し込む処理-->
		for(var k=0;k<4;k++){
			var cell=document.createElement("td");
			cell.innerHTML=nodelist[i].childNodes[k].childNodes[0].nodeValue;
			row.appendChild(cell);
		}
		tbody.appendChild(row);
	}
	table.appendChild(tbody);
	table.border=1;
	document.getElementById("serch_result2").appendChild(table);
}

<?php
header('Content-Type: text/html; charset=UTF-8');
	/*検索条件の取得*/
	$value=$_POST['send_value'];

	$mysqli=new mysqli('localhost','sa','qwertyuiop@1','db_01');
		if($mysqli->connect_error){echo "ＤＢ接続できませーん";}
	$stmt=$mysqli->prepare("SET NAMES utf8");
	$stmt->execute();
	
	/*検索条件の取得による分岐*/
		
			$stmt=$mysqli->prepare("select id,name,category,update_time from t_01 where name like '%$value%' ") or exit("error");
	
	
	$stmt->execute();
	$stmt->bind_result($result_id,$result_name,$result_category,$result_time);


/*/////////////////////////////
//DB取得データをxmlデータに変換//
////////////////////////////////*/
	
header("Content-type: text/xml");
	echo'<?xml version="1.0" encoding="utf-8" ?>';
	echo '<lists>';
		while($stmt->fetch()){
			echo '<list>';
			echo '<id>'.$result_id.'</id>';
			echo '<name>'.$result_name.'</name>';
			echo '<category>'.$result_category.'</category>';
			echo '<updatetime>'.$result_time.'</updatetime>';
			echo '</list>';
		}
	echo '</lists>';
?>