EasyUI，comobox兼容可编辑和和下拉框

问题初遇

最近在开发一个功能的时候遇到一个问题。

EasyUI中的comobox，组合框可以在下拉框中选择，也可以手动输入后，因为有自带的模糊查询，下拉框中有对应内容的提示。

问题来了：

1、如果你不去选择安卓，这里应该提示你这名称是有错的。

2、如果你输入了360，这里没有360的选项，但是数据库里面有360这个对应的一个平台的时候，是正确的，

没有的话应该返回错误。

EasyUI comobox实现原理

这个实现一般是：

前端页面：

//获取应用名combobox的选项
$('#platform').combobox({
    url:'paltform.action',
    valueField:'id',
    textField:'text'
});

valueFiled为绑定到comobox的value上的基础数据的名称。textFiled为绑定到comobox的text上的基础数据的名称。

就像上面的安卓，安卓其实是text的值，其实value值是一个数字。

一般数据库设计的时候遵循三范式，所以关联表的时候，一张表里面有另一张表的id，根据id再去取对应的名称。

后端

platform.action的实现：

其实EasyUI是的数据格式要求是json，本篇文章的例子是id和text字段，json串里面需要这两个属性。

所以我们可以新建一个类comobox，包括这两个字段。

然后去数据库请求平台数据，将id和text传进comobox类中，再封装成list对象。

然后转换为json串，返回前端。

[{"id":"1","text":"安卓"}]

问题的解决

最简单的解决办法

直接将组合框设置成不可编辑，这样就一定手动选择下拉框。

editable="false"  

缺点，如果组合框有100个选项又不可编辑，即不能使用模糊查询，这样操作起来十分复杂。

自己想到的方法

因为选中下拉框之后，最后后台获取的不是text字段，而是text对应的value，即平台的id。

所以例子中的 安 没选中的时候，传入的值是安，而不是安卓对应的id，此时，只要判断

它为数字非法就可以了。

if(!(/^[+]?[1-9]+\d*$/i.test($('#platform').combobox('getValue')))){
	$.messager.alert("提示","请在下拉框中选择平台");
	return;
}

但是，如果平台就是数字命名怎么办呢，如果不做判断，那么他会插进这个数字，

但是事实上，这个数字并不是于平台数据表里面的id。所以，要再请求一次，查询id是否存在于数据库。

特别的是，输入这个东西没有id对应值的时候，value的值和text的值是相同的。

所以输入安这种情况，是没有id对应值的。$('#platform').combobox('getValue')此时不是数字，所以这种情况是这样排除的。

if(!(/^[+]?[1-9]+\d*$/i.test($('#platform').combobox('getValue')))){
	$.messager.alert("提示","请在下拉框中选择平台");
	return;
}else if(/^[+]?[1-9]+\d*$/i.test($('#platform').combobox('getValue'))){
	$.ajax({
		type: "GET",
		dataType: "text",
		url:"platformIDExist.action?platformid="+$('#platform').combobox('getValue'),
		success: function(data){
		data = $.trim(data);
		if(data == "false"){
			$.messager.alert("提示","该平台不存在!");
			return  ;
		}else{
			validatesuccess();
		}
			},
		error: function(){
			$.messager.alert("提示","网络连接失败!");
		}
	});
}

当输入360的时候，$('#platform').combobox('getValue')此时是数字，但是，数据库可能存在这个id。虽然这个有点多余，但是平台名称并不是全部都是文字。

将此id通过ajax再次请求，进行判断数据库是否存在然后返回值即可。

这样之后，可应对各种情况。

当输入平台名但是没输入完全或者没选中的时候，提示选择下拉框。

当输入平台名是数字但是又提交的时候，根据数字id在数据库中是否存在进行插入。

问题解决。