Textboxlist解决中文支持问题

Textboxlist可以写出类似facebook那样的点名功能，还能进行autosuggest自动提示表单，用起来非常方便；

但网上所有的例子都是英文表单的自动匹配，直接输入中文字符是不会显示匹配结果的，不能不说非常遗憾；

花了两天时间研究了一下Textboxlist.autocomplete.js，对其中的代码进行了小规模的改动，终于能支持中文了，赞一下自己~！O(∩_∩)O~

其实只要定位到显示匹配结果的代码就比较容易了：

		filter: function(values, search, insensitive, max){
			var newvals = [], regexp = new RegExp('\\b' + escapeRegExp(search), insensitive ? 'i' : '');
			for (var i = 0; i < values.length; i++){
				if (newvals.length === max) break;
				if (regexp.test(values[i][1])) newvals.push(values[i]);
			}
			return newvals;
		},

这就是显示匹配结果的代码，filter方法会对结果进行筛选，用到了正则表达式，而中文字符根本不需要那么复杂的正则表达式，改成这样：

		filter: function(values, search, insensitive, max){
			var newvals = [], regexp = new RegExp(search);
			for (var i = 0; i < values.length; i++){
				if (newvals.length === max) break;
				if (regexp.test(values[i][1])) 
				newvals.push(values[i]);
			}
			return newvals;
		},

可以看到复杂的正则表达式被改成了简单的一个"search"——要什么汉字就匹配什么汉字；这样一来输入中文字符就有结果显示出来了！

如果还要实现关键字高亮的效果，也需要修改下面的highlight方法中的正则表达式，将highlight方法改成这样：

		highlight: function(element, search, insensitive, klass){
			var regex = new RegExp(search);
			return element.html(element.html().replace(regex, '<span class="'+ klass +'">' + search + '</span>'));
		}

也是改成很简单的“search”，这样就OK啦~！

这个插件用到json的文本格式，而json只支持utf-8的编码格式，所以后台在向前台传递数据的时候还需要转换一下编码，这里用到了两个函数，iconv()和preg_repalce()：

	function autosuggest(){
		$sql = & $this->_model('project');
		$data=$sql->listallnames();
		$response=array();
		foreach( $data as $key=>$value){
		$value['avatar']=empty($value['avatar']) ? 'upfiles/avatar/noavatar.gif': $value['avatar'] ;//若没有头像则使用默认头像
		$response[$key]=array($key,iconv('gbk','utf-8',$value['name']),null,'<img src="'.SITE_URL.'/'.$value['avatar'].'" width="30px" height="30px"/>'.'<span style="height:30px;vertical-align:top;">'.iconv("gbk","utf-8",$value["name"]).'</span>');//响应的html内容：头像+姓名
		}
		header("Content-type: application/json;charset=gbk");
		$code = json_encode($response);
		$json = preg_replace("#\\\u([0-9a-f]+)#ie", "iconv('UCS-2', 'gbk', pack('H4', '\\1'))", $code);//iconv()函数可以方便的实现各种不同编码格式的转换；数据传递到前台后，中文字符都变成\u4e00，\u9fa5这种USC-2格式的字符，preg_replace函数将这些字符重新转换成GBK
		echo $json;
	}

这是我后台的php代码，读者可以参考Textboxlist代码包中自带的实例来阅读，实现的是同样的效果。