There are some bugs in the tagbox plugin

[zhangjian420]

Ver:1.10.1
The tagbox is inherited from the ComboBox plugin, so I can use all the properties in the ComboBox plugin. When I use mode: "remote" in tagbox I got some exceptions.

Code:

<input name="item.graph_id" class="form-control easyui-tagbox" id="graph_id"
					data-options="required:true,valueField:'id',textField:'title',hasDownArrow: true,limitToList: true,
					url:'#(path)/graph/listj',mode:'remote',delay:500," 
					value="#(item.graph_id??)">

1、When you directly select some options from the drop-down options, and then enter some words, the selected value suddenly becomes the result of id. Finally, delete all the selected values, click the drop-down button, and find that the drop-down options are not the same as the beginning.

2、Chinese internationalization of tagbox is wrong, still in English

[jarry]

Please override the 'tagFormatter' function to achieve your requirement.

Code:

$('#cc').tagbox({
	onBeforeLoad: function(){
		var data = $(this).tagbox('getData');
		var opts = $(this).tagbox('options');
		var values = $(this).tagbox('getValues');
		opts.mappingRows = opts.mappingRows||[];
		data = data.concat(opts.mappingRows);
		for(var i=0; i<values.length; i++){
			var item = $.easyui.getArrayItem(data, opts.valueField, values[i]);
			if (item){
				var row = $.easyui.getArrayItem(opts.mappingRows, opts.valueField, values[i]);
				if (!row){
					opts.mappingRows.push(item);
				}
			}
		}
	},
	tagFormatter: function(value,row){
		var opts = $(this).tagbox('options');
		if (row && row[opts.textField]){
			return row[opts.textField];
		}
		var mappingRows = opts.mappingRows||[];
		var item = $.easyui.getArrayItem(mappingRows, opts.valueField, value);
		return item ? item[opts.textField] : value;
	}
})

[zhangjian420]

thank you very much for your reply！
But there are still some problems.When mode: 'remote', after entering some words in the tagbox, the drop-down list will find some matching options, but the entered words suddenly disappear. combobox does not have this problem

If I don't select any of the options in the drop-down, clicking the drop-down button again will find that the drop-down options are the ones that matched the word I just entered, not all of them.

Please override the 'tagFormatter' function to achieve your requirement.

Code:

$('#cc').tagbox({
	onBeforeLoad: function(){
		var data = $(this).tagbox('getData');
		var opts = $(this).tagbox('options');
		var values = $(this).tagbox('getValues');
		opts.mappingRows = opts.mappingRows||[];
		data = data.concat(opts.mappingRows);
		for(var i=0; i<values.length; i++){
			var item = $.easyui.getArrayItem(data, opts.valueField, values[i]);
			if (item){
				var row = $.easyui.getArrayItem(opts.mappingRows, opts.valueField, values[i]);
				if (!row){
					opts.mappingRows.push(item);
				}
			}
		}
	},
	tagFormatter: function(value,row){
		var opts = $(this).tagbox('options');
		if (row && row[opts.textField]){
			return row[opts.textField];
		}
		var mappingRows = opts.mappingRows||[];
		var item = $.easyui.getArrayItem(mappingRows, opts.valueField, value);
		return item ? item[opts.textField] : value;
	}
})