input搜索框实时检索功能实现（亲测有效，超级好用）

一：目前监听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请求生成下拉框内容
      }
  });