suggest.jsをjQueryを使ってAJAX対応にする。

suggest.jsとっても便利です。
開発して下さってありがとうございます。

suggest.jsでは候補データを事前にJavaScriptの配列として書き出す必要があります。
件数が少ないうちは問題無いのですが、300件を超えたあたりから、非力なPCでは重いという感想を頂きました。
それなら、AJAXに対応することで解決しましょうというお話です。

suggest.jsのAJAX化の情報は数件見つかりましたが、jQueryを使いJSON形式でデータをやり取りするのが今回の特徴になっています。

[javascript title=”JavaScript”]
new Suggest.Local(
“title”,
“suggest”,
[],
{
hookBeforeSearch: function(text){
var self = this;
//getJSONを使い、戻り値をそのまま渡すことができます。
$.getJSON(“json.php”,{d:text},function(data){
//clearSuggestAreaとcreateSuggestAreaはsuggest.js内でも行っているようなのですが、
//ここで明記しないとうまくデータが更新されませんでした。
self.clearSuggestArea();
self.candidateList = data;
var resultList = self._search(text);
if (resultList.length != 0) self.createSuggestArea(resultList);
}
});
},
dispMax: 20,
interval: 500,
highlight: true
});

[/javascript]

JSONデータ発行部分はPHPで書きました。
適当ですみません。PDOだったりMDB2など各自の方法でやってください。
[php title=”JSONデータ発行部分”]
$d = $_GET[‘d’];
//本当は受け取ったデータをエスケープしなければいけませんが、省略
$Query = “SELECT * FROM hoge “;
$Query.= “WHERE title LIKE ‘%”.$d.”%'”;

$Data = array();
$Data = ;//DBからデータを抽出し配列に入れます。

//json_encodeを使い配列を一気にJSON形式に変更して出力します。
echo json_encode($Data);
[/php]

スポンサーリンク
レクタングル大