input搜索框实时检索功能实现（超简单，核心原理请看思路即可）

问题：实现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:

    
    
    
    



    
    search