问题：实现input搜索框实时检索的功能，类似哔哩哔哩首页搜索功能（壮哉我大b站！）。公司要求，emmmm没办法，果然懒人是要被赶着走才会进步的说，诶嘿O(∩_∩)O。
解决方法：
1.参考资料：http://www.jb51.net/article/111408.htm 基础思路
http://blog.sina.com.cn/s/blog_69ec42d50102wqok.html 进阶思路
2.效果图：
3.思路：
一：目前监听input输入框有三种方法：
一种是onchange事件，触发条件：内容改变且失去焦点。
一种是onpropertychange事件，触发条件：元素内容改变即触发，另外js改变内容，该元素的属性改变也会触发。但只在IE11以下支持。
一种是html5的oninput事件，触发条件：value值的改变，但是js方式改变value不会触发，且在IE8以上及其他标准浏览器支持。
二：采用最简单的html5的oninput事件，onchange事件触发条件无法达到理想的输入即检索，onpropertychange对浏览器的支持力度太低。
三：由于oninput事件是输入即触发，这会导致出现输入汉字时出发次数过多，即使在拼写的时候也会触发，影响用户体验和后台交互，所以利用compositionstart和compositionend来处理。
原理：
当浏览器有非直接的文字输入时，compositionstart事件就会同步触发，记住，是同步
当浏览器是直接的文字输入时，compositionend事件就会触发
所以：
var cpLock = false;
$('input[search]').on('compositionstart', function () {
// 输入汉语拼音时锁住搜索框，不进行搜索，或者从汉语拼音转到字母时也可触发
cpLock = true;
console.log('不搜索')
});
$('input[search]').on('compositionend', function () {
// 结束汉语拼音输入并生成汉字时，解锁搜索框，进行搜索
cpLock = false;
console.log('汉字搜索');
// 接下去放ajax请求生成下拉框内容
});
$('input[search]').on('input', function () {
if (!cpLock) {
console.log('字母搜索')
// 接下去放ajax请求生成下拉框内容
}
});
4.代码:（我知道大家都和我一样懒的，嗯~ o(*￣▽￣*)o，不要脸地这么认为了，嘿嘿，下面代码是我稍微改了某大神的代码弄的demo，对不起大神，真的不是故意不加名字链接的，主要是开的页面太多关了不知道是哪个，加上自己懒）
demo: