インクリメンタルサーチの実装する必要があったので書いた。
APIに問い合わせる感じのやつです。
動き
検索欄にキーワードを入力すると、非同期でキーワードをGET送信する。
送信したキーワードに対して前方一致する検索結果がある場合、取得してフォームの下に表示する。
インクリメンタルサーチ
IncrementalSearchFormSample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IncrementalSearchFormSample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var keyupStack = [];
$('#search').on('keyup', function () {
keyupStack.push(1); //配列の後ろに追加
// 指定時間後に処理を実行させる
setTimeout(function () {
keyupStack.pop(); //配列の中身排出
// 最後にkeyupされてから次の入力がなかった場合
if (keyupStack.length === 0) {
$.ajax({
type: "GET",
url: "/apiurl",
data: {keyword : $('#search').val()} , // キーワードを送信してデータを検索してにいく
}).done(function(data) {
// 取得したデータを処理する（ここではjsonを受け取る想定）
var test_len = Object.keys(data["test"]).length;
for(var i = 0; i < test_len; i++){
$("#test").append("<li>" + data["test"][i]["name"] + "</li>");
}
}).fail(function(data) {
alert('failed!');
});
}
}.bind(this), 500); // 0.5秒設定
});
});
</script>
</head>
<body>
検索欄：<input type="text" name="keyword" id="search">
<ul id="test"></ul>
</body>
</html>
jQuery依存症から抜け出せない