php实现输入框实时查询,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

$('.it-res').append('&nbsp&nbsp-'+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);

}

}