検索フィールドでキャンセルボタンを押した時もsearchイベントが起きるようです。
なので、キャンセルボタンを押されたのか、リターンキーなどで検索処理をしたいのかは判別した方が良さそうですね。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>search</title>
<style>
#search_box {
font-size: 2em;
-webkit-appearance: none;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('search_box').addEventListener('search', function(e) {
console.log('value:[' + this.value + ']');
if ( this.value.length === 0 ) {
console.log('[cancel]');
return;
}
/*
search procedure
*/
}, false);
}, false);
</script>
</head>
<body>
<h1>検索フィールドのキャンセルボタンイベント</h1>
<input type="search" id="search_box" placeholder="search word">
</body>
</html>