js实现输入框实时搜索

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

我觉得应该是简单,监听键盘输入动作不就行了?
实际做的时候发现没这么简单,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('
  -'+data.result.songs[i].name+'

'); } $('.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/ 导航栏点搜索

你可能感兴趣的:(js实现输入框实时搜索)