今天有个需求，根据input用户输入进行实时进行模糊查询。一想到这个需求就想到jQuery的input propertychange函数。但是做起来和想一般都不一样的，，，，，然后我就光荣跳坑了。
实现实时监听其实有两套方案，下面废话少说，进入第一个方案
1.使用input propertychange函数，结合compositionstart和compositionend监听输入法。不过缺点是要调用两次ajax。用方案2的话只调用一次，但需要引入插件。
$('input#companyName').unbind("input propertychange").bind('input propertychange', function(e) {if($(this).prop('comStart')) return; // 中文输入过程中不截断console.log($(this).val());//只为打印看结果getData($("#companyName").val())}).on('compositionstart', function() {$(this).prop('comStart', true);console.log('中文输入：开始');}).on('compositionend', function() {$(this).prop('comStart', false);console.log('中文输入：结束');console.log($("#companyName").val());//只为打印看结果，然后进行请求getData($("#companyName").val())});function getData(value){$.ajax({url: "/fftg/xxxxx/getCompanyName",type: "post",dataType: "json",data: {"phName":value},success: function(data) {console.log(data);//接下来将数据放入容器，选中时取到值就ok}});
}2.第二个方案：使用jquery-ui.min.js和jquery-ui.min.css。使用autocomplete模块实现实时的模糊查询。下面顺便贴我代码
function getKeyUpData(availableTags) {
$("#companyName").autocomplete({source: availableTags,
// source: function(request, response) {
// $.ajax({
// url: "/fftg/redisPh/getRedisPharmacy",
// type: "post",
// dataType: "json",
// data: {
// "phName": $(".rph").val()
// },
//
// success: function(data) {
// console.log(data);
// response($.map(data, function(item) {
// return {
// label: item.label,
// value: item.value
// }
// }));
// }
// });
// },
// serviceUrl: 'QueryServices.ashx',//获取数据的后台页面 ------------不知道能不能这样做，暂定delay: 20,response: function(event, ui) {// event 是当前事件对象console.log(ui.content.length)// ui对象仅有一个item属性，它表示当前选择的菜单项对应的数据源对象// 该对象具有label和value属性，以及其它自定义(如果有的话)的属性// 如果当前没有选择的菜单项，这item属性为nullif(ui.content.length <= 0) {$(".noneSearch").show();//展示没有搜索内容} else {$(".noneSearch").hide();}},select: function(event, ui) {// event 是当前事件对象console.log(ui.item.value)// ui对象仅有一个item属性，它表示当前被选中的菜单项对应的数据源对象// 该对象具有label和value属性，以及其它自定义(如果有的话)的属性}});
}//将函数放入$(function(){})中即可