利用EasyUI的Combo系列控件实现输入框自完成功能

实现代码（支持控件：Combo、ComboBox、ComboGrid）

var customer_unit=$('#customer_unit').combobox({
    width:280,
    hasDownArrow:false,  /*定义是否显示向下箭头按钮,false隐藏*/
    url:'get_data.php',    
    mode:"remote", 
    /*mode:"remote" 非常重要：定义了当文本改变时如何读取列表数据。设置为'remote'时，下拉列表框将会从服务器加载数据。当设置为“remote”模式时，用户输入将被发送到名为'q'的HTTP请求参数到服务器检索新数据。如果保持默认local的话会出现第二次输入时数据会从第一次读取的数据中筛选，可能会导致部分数据无法显示*/
    valueField:'unit_id',    
    textField:'unit_name'   
});  

后端代码：（仅供参考）
 

<?php
	#接收到的关键词  
	$q = isset($_POST['q']) ? $_POST['q'] : '';  
	#执行数据库查询
	$query = mysql_query("select * from item where name like '%".$q."%'");  
	#输出结果
	echo json_encode($query -> fetchAll(\PDO::FETCH_ASSOC),JSON_UNESCAPED_UNICODE);  
?>

常见问题：
1、在第一次输入关键词时会显示数据，更换另一个关键词后没有显示数据，但是在数据库中是有该数据的。
解决方法：
将Combo控件的mode属性改为remote，这非常重要，定义了当文本改变时如何读取列表数据。设置为'remote'时，下拉列表框将会从服务器加载数据。当设置为“remote”模式时，用户输入将被发送到名为'q'的HTTP请求参数到服务器检索新数据。如果保持默认local的话会出现第二次输入时数据会从第一次读取的数据中筛选，可能会导致部分数据无法显示

 

更多EasyUI小技巧请访问，bbs.insdep.com 或www.insdep.com

关注QQ群184075694

 

转载于:https://my.oschina.net/magicweng/blog/852999