实时监听input的值，类似于实现模糊查询，处理输入中文问题

今天有个需求，根据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属性为null
			if(ui.content.length <= 0) {
				$(".noneSearch").show();//展示没有搜索内容
			} else {
				$(".noneSearch").hide();
			}
		},
		select: function(event, ui) {
			// event 是当前事件对象
			console.log(ui.item.value)
			// ui对象仅有一个item属性，它表示当前被选中的菜单项对应的数据源对象
			// 该对象具有label和value属性，以及其它自定义(如果有的话)的属性
		}
	});
}//将函数放入$(function(){})中即可

感谢遇到这个问题，让我又涨见识了。