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

心已赠人 2022-03-31 15:38 231阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

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

![2019010319392374.gif][]

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

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

![20190103194419897.png][]

里面确实没有注册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在火狐浏览器下中文检索的效果如下：![20190103195818899.gif][]

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

![20190103195951935.gif][]

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

![2019010320162447.png][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20220331/cdbeb485123c481b95fd038c97548d05.png
[2019010319392374.gif]: /images/20220331/788b1f120ec847959104ae26991a0528.png
[20190103194419897.png]: /images/20220331/4454b09c9d694a95978bba5159e1901c.png
[20190103195818899.gif]: /images/20220331/bf1a4cc9359947aeb462f09d05521f26.png
[20190103195951935.gif]: /images/20220331/dd632788bd58437f840bab7ea1c2c8e2.png
[2019010320162447.png]: /images/20220331/095d7b86882744eea264856daecde984.png