easyui中combobox在火狐浏览器下中文检索问题

当combobox下拉框中的下拉列表选项过多时，我们不喜欢下拉然后一个一个选择，我们希望可以通过输入相关内容，然后根据内容来匹配结果，默认情况下，combobox支持自动匹配，用户输入部分内容，然后根据内容来匹配相关的下拉选项。如下图所示：

如果是中文的选项，在chrome浏览器下也是类似的效果，但是在火狐浏览器下，却不好使了。当我们输入了相关内容，需要按下额外的键，比如shift,ctrl,alt,space等等，然后才出现下拉框。

这属于一个不好的用户体验，不能说是一个bug，但是却在chrome和firefox浏览器之间表现出差异，也算是一个兼容性的问题。至于问题的原因是，在firefox浏览器下，combobox的输入事件，只监听了keydown，没有监听keyup事件，所以当我们鼠标按下的时候才会出现下拉框的提示，而当我们输入完一个汉字的时候，键盘事件是keyup，没有触发showPanel事件。

我们可以在浏览器控制台下看到$.fn.combobox.defaults.inputEvents

里面确实没有注册keyup事件。这样一来，我们就无法在输入中文完成之后，就触发showPanel事件。这里解决办法，有的提议修改源代码，将代码里面的keydown修改为keyup，这种修改源代码的方式，我虽然不反对，但是却感觉不是很理想的解决办法，源码是非压缩过的，还好，但是压缩过的，就不好说了，而且换了版本，我们还是需要修改源码。

这里的思路是，既然没有keyup事件，我们通过配置，让他有一个keyup事件，就可以了。不用改变jquery.easyui源代码。

(function($){ 
    var keyup = $.fn.combobox.defaults.inputEvents.keydown;
    $.extend(true,$.fn.combobox.defaults.inputEvents,{
        keyup:keyup
    });
})(jQuery);

将这段代码和jquery.easyui.min.js一起引入到html页面中，就可以了，下面给出完整的示例代码：

<!doctype html>
<html>
  <head>
	   <meta charset="UTF-8"/>
	   <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
	   <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
	   <link rel="stylesheet" type="text/css" href="../demo/demo.css"/>
	   <script type="text/javascript" src="../jquery.min.js"></script>
	   <script type="text/javascript" src="../jquery.easyui.min.js"></script>
	   <script type="text/javascript" src="js/easyui-global.settings.js"></script>
  </head>
  <body>
	   <div id="container">
			<form id="ff">
				<div style="margin-bottom:20px;">
				  <label>英文下拉框：</label>
				  <input type="text" id="cityname-en" name="cityname" 
					class="easyui-combobox" 
					data-options="panelHeight:'auto'" style="width:128px;" 
					validType="notNull['#cityname-en']"/>
			   </div>
			   <div style="margin-bottom:20px;">
				  <label>中文下拉框：</label>
				  <input type="text" id="cityname-zh" name="cityname"
					class="easyui-combobox" 
					data-options="panelHeight:'auto'" style="width:128px;" 
					validType="notNull['#cityname-zh']"/>
			   </div>
			   <div style="margin-bottom:20px;">
				   <a href="javascript:void(0);" onclick="save()" 
					class="easyui-linkbutton">提交</a>
			   </div>
			</form>
	   </div>
	   <script type="text/javascript">
			function save(){
				var valid = $("#ff").form("enableValidation").form("validate");
				var formData = $("#ff").serialize();
				console.log("form validate : "+valid+",param :"+formData);
			}
			$(function(){
				$("#cityname-en").combobox({
				   data:[
					   {text:'-select-',value:''},
					   {text:'beijing',value:'bj'},
					   {text:'shanghai',value:'sh'},
					   {text:'guangzhou',value:'gz'},
					   {text:'guangxi',value:'gx'},
					   {text:'chongqing',value:'cq'}
					   ]
				});
				$("#cityname-zh").combobox({
				   data:[
					   {text:'-请选择-',value:''},
					   {text:'北京',value:'bj'},
					   {text:'上海',value:'sh'},
					   {text:'广州',value:'gz'},
					   {text:'广西',value:'gx'},
					   {text:'重庆',value:'cq'}
					   ]
				});
			});
	   </script>
  </body>
</html>

easyui-global.settings.js

(function($){
	var keyup = $.fn.combobox.defaults.inputEvents.keydown;
	$.extend(true,$.fn.combobox.defaults.inputEvents,{
		keyup:keyup
	});
})(jQuery);

最终，combobox在火狐浏览器下中文检索的效果如下：

再来一张效果图，直接输入完相关内容的汉字，无须再按下什么键，就可以触发showPanel事件。

最后，再次通过控制台，看看我们的combobox的输入事件列表，这时候就已经有了keyup：

jquery-easyui给我们提供的控件，几乎每一个都可以修改默认属性，我们可以通过修改options来改变这些属性，然后让他达到我们想要的效果。

easyui中combobox在火狐浏览器下中文检索问题

猜你喜欢