想做出的效果就是一边输入关键词，搜索框下面就可以跳出搜索结果

我觉得应该是简单，监听键盘输入动作不就行了？
实际做的时候发现没这么简单，onkeyup()，搜索结果总是会乱掉，而且onkeyup不支持复制粘贴；
看看类似功能的这几个时间:

onchange事件：

只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效

onkeydown/onkeypress/onkeyup事件

在处理复制、粘贴、拖拽、长按键（按住键盘不放）等细节上并不完善
只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效

onpropertychange事件

此属性可在某些情况下解决上面存在的问题，不用考虑是否失去焦点，不管js操作还是键盘鼠标手动操作，只要HTML元素属性发生改变即可立即捕获到。遗憾的是，onpropertychange为IE专属的
oninput
HTML5中的标准事件，不过IE9以下的浏览器是不支持oninput事件的。
在手册里翻到了oninput:仅仅在input的value值发生改变才会触发，鼠标键盘复制粘贴均可以触发，但是js修改其value值则不会触发。（chrome/safari/ff/opera/IE9+）基本上已经ok了，ie9以下怎么办呢？兼容onpropertychange就ok了。
下面是代码：
js部分

function OnInput (event) {
    if(event.target.value!='') {

        $.get("http://arrest.site:3000/search?keywords=" + event.target.value + '&limit=12', function (data) {
            // console.log(data)
            $('.it-res').html(' ');
            for(var i=0;i<(data.result.songs).length;i++){
                $('.it-res').append('<br><span onclick="play(event)" id="'+data.result.songs[i].id +'">&nbsp&nbsp-'+data.result.songs[i].name+'</span><br><br>');
            }
            $('.search-res').show();
        });


    }else{
        $('.search-res').hide();
    }
}
// Internet Explorer
function OnPropChanged (event) {
    if (event.propertyName.toLowerCase () == "value") {
        alert ("The new content: " + event.srcElement.value);
    }
}

在线演示：http://arrest.site/netmusic/m/ 导航栏点搜索