HTML5 Datalist via AJAX

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Datalist via AJAX</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
    $("#search").on("input", function(e) {
        var val = $(this).val();
        if(val === "") return;
        $.get("getData.php?field=title", {term:val}, function(res) {
            var dataList = $("#searchBook");
            dataList.empty();
            if(res.DATA.length) {
                for(var i=0, len=res.DATA.length; i<len; i++) {
                    var opt = $("<option></option>").attr("value", res.DATA[i][0]);
                    dataList.append(opt);
                }

            }
        },"json");
    });

})
</script>
</head>

<body>

<p>
    <input type="text" name="search" id="search" placeholder="Type Something" list="searchBook" autocomplete="off">
    <datalist id="searchBook"></datalist>
</p>

</body>
</html>