【表单提示建议/自动完成功能】jquery autocomplete插件的使用及其改进
2013-05-06 16:00
1016 查看
上一篇文章，主要讲了jquery autocomplete插件调用本地数据和远程ajax查询数据的用法，但在ajax查询实现时候不是按需动态查询返回，而是把所有查询结果都返回，再通过js插件对数据进行取舍，输出到页面上。这样做的缺点就是降低了程序的性能，增加了耗时。如果返回结果是成千上万条的数据，那这个就比较笨重了。
这里我通过几种方式对程序进行了改进，以求实现性能的提升和用户体验的提升。
一、自己构造Ajax传参，不采用插件规定的
PHP控制器：
Model文件：
说明：数据库N前缀是转义字符，将编码转义为 Unicode ，在服务器上执行的代码中（例如在存储过程和触发器中）显示的 Unicode 字符串常量必须以大写字母 N 为前缀。即使所引用的列已定义为 Unicode 类型，也应如此。如果不使用 N 前缀，字符串将转换为数据库的默认代码页。这可能导致不识别某些字符。例如，在前面示例中创建的存储过程可以按以下方式在服务器上执行： EXECUTE Product_Info @name = N'Chain'。使用 N 前缀的要求适用于在服务器上生成的和客户端发送的字符串常量。
html模板文件
补充：
1、autocomplete 属性规定表单是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
提示：在某些浏览器中，您可能需要手动启用自动完成功能。
2、MySQL数据库对于中文查询关键字不识别的解决方法
首先检查文件的编码格式，看看页面顶部声明编码是不是GB2312或者UTF-8格式，声明格式一般为：
PHP语句mysql_query("SET NAMES UTF8");
其次检查文件的物理存储编码格式，经常会默认是ansi格式造成对中文的不友好。可以通过记事本方式打开，再另存为utf-8格式。
3、数据库的编码设置问题，这时候需要修改数据库的环境变量，设置为目标格式
第一种方式是可以采用便捷的数据库管理工具，比如MySQL Administrator，查找对应菜单，操作进行设置修改。
character-set-server/default-character-set：服务器字符集，默认情况下采用该格式。
character-set-database：数据库字符集。
character-set-table：数据库表字符集。
以上优先级依次增加。所以一般情况下只需要设置character-set-server，而在创建数据库和表时不特别指定字符集，这样统一采用character-set-server字符集。
character-set-client：客户端的字符集。客户端默认字符集。当客户端向服务器发送请求时，请求以该字符集进行编码。
character-set-results：结果字符集。服务器向客户端返回结果或者信息时，结果以该字符集进行编码。
在客户端，如果没有定义character-set-results，则采用character-set-client字符集作为默认的字符集。所以只需要设置character-set-client字符集。
要处理中文，则可以将character-set-server和character-set-client均设置为GB2312，如果要同时处理多国语言，则设置为UTF8。
在执行SQL语句之前，将MySQL以下三个系统参数设置为与服务器字符集character-set-server相同的字符集。
character_set_client：客户端的字符集。
character_set_results：结果字符集。
character_set_connection：连接字符集。
设置这三个系统参数通过向MySQL发送语句：set names gb2312
第二种方法是修改MySQL配置文件my.cnf，如果是在文件中相应位置添加如下代码，以GBK编码为例，
default-character-set = gbk
########################
[client]
default-character-set = gbk
[mysqld]
default-character-set = gbk
#########################
修改结束以后，保存，然后使用客户端登录
#mysql -u root -p
在客户端中输入
>status;
则显示当前编码状态。
关于GBK、GB2312、UTF8的区别请参考其他文章。
这里我通过几种方式对程序进行了改进，以求实现性能的提升和用户体验的提升。
一、自己构造Ajax传参，不采用插件规定的
extraParams参数。
PHP控制器：
<?php
/**
*/
class pmc_try
{
public $_GP;
function __construct()
{
$this->_GP = array_merge($_GET,$_POST);
pm_tpl::assign('lang',$this->lang());
}
public function diy(){
pm_tpl::display("demo_autocomplete");
}
public function ajax_diy(){
$fid = $_GET['testfid'];
$forums = mod_forum::get_ajx_forum_by_tpid(400, $fid);
$output = json_encode($forums);
echo $output;
exit();
}
public function lang()
{
include PATH_LANG.'/common.php';
return $_LANG;
}
}
?>Model文件：
public static function get_ajx_forum_by_tpid($tpid, $fid)
{
//产品ID：tpid，版块ID：fid
$data = array();
if($tpid && $fid){
//$sql = "SELECT name FROM sq_forums WHERE tpid='$tpid' ORDER BY threads_counter DESC";
$sql = "SELECT name FROM sq_forums WHERE tpid='$tpid' AND name LIKE N'%$fid%' ORDER BY threads_counter DESC";
$query = pm_db11::query($sql);
$data = pm_db11::fetch_all($query);
}
return $data;
}说明：数据库N前缀是转义字符，将编码转义为 Unicode ，在服务器上执行的代码中（例如在存储过程和触发器中）显示的 Unicode 字符串常量必须以大写字母 N 为前缀。即使所引用的列已定义为 Unicode 类型，也应如此。如果不使用 N 前缀，字符串将转换为数据库的默认代码页。这可能导致不识别某些字符。例如，在前面示例中创建的存储过程可以按以下方式在服务器上执行： EXECUTE Product_Info @name = N'Chain'。使用 N 前缀的要求适用于在服务器上生成的和客户端发送的字符串常量。
html模板文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
<title></title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src='./static/js/jquery-autocomplete/jquery.autocomplete.js'></script>
<script type='text/javascript' src='./static/js/jquery-autocomplete/localdata.js'></script>
<link rel="stylesheet" type="text/css" href="./static/js/jquery-autocomplete/jquery.autocomplete.css" />
</head>
<body>
<script type="text/javascript">
function initAutoComplete(json){
$("#colum").autocomplete(json , {
minChars: 0,
max: 500,
width:260,
//dataType:"json",
matchContains: true,
matchCase: false,
autoComplete: false,
autoFill: false,
scrollHeight: 220,
mustMatch: false,
formatItem: function(row, i, max) {
return row.name;
},
formatMatch: function(row, i, max) {
return row.name;
},
formatResult: function(row) {
return row.name;
}
});
}
$().ready(function() {
$("#city").focus().autocomplete(cities);
$("#colum").change(function(){
$(this).flushCache();
var fid = $("#colum").val();
var url = "http://pm.feiliu.com/?c=try&a=ajax_diy";
$.get(url,{testfid:fid},function(data){
//alert(data);
//实时返回数据，查询结果很快返回，但js解析、格式化为html比较耗时
initAutoComplete(data);
},"json");
});
})
</script>
<form autocomplete="off">
<p>
<label>城市名(调用本地文件数据):</label>
<input type="text" id="city" />
</p>
<p>
<label>飞流产品版块 (Ajax调用远程数据):</label>
<input type="text" id="colum" />
</p>
</form>
</body>
</html>补充：
1、autocomplete 属性规定表单是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
提示：在某些浏览器中，您可能需要手动启用自动完成功能。
2、MySQL数据库对于中文查询关键字不识别的解决方法
首先检查文件的编码格式，看看页面顶部声明编码是不是GB2312或者UTF-8格式，声明格式一般为：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
PHP语句mysql_query("SET NAMES UTF8");
其次检查文件的物理存储编码格式，经常会默认是ansi格式造成对中文的不友好。可以通过记事本方式打开，再另存为utf-8格式。
3、数据库的编码设置问题，这时候需要修改数据库的环境变量，设置为目标格式
第一种方式是可以采用便捷的数据库管理工具，比如MySQL Administrator，查找对应菜单，操作进行设置修改。
character-set-server/default-character-set：服务器字符集，默认情况下采用该格式。
character-set-database：数据库字符集。
character-set-table：数据库表字符集。
以上优先级依次增加。所以一般情况下只需要设置character-set-server，而在创建数据库和表时不特别指定字符集，这样统一采用character-set-server字符集。
character-set-client：客户端的字符集。客户端默认字符集。当客户端向服务器发送请求时，请求以该字符集进行编码。
character-set-results：结果字符集。服务器向客户端返回结果或者信息时，结果以该字符集进行编码。
在客户端，如果没有定义character-set-results，则采用character-set-client字符集作为默认的字符集。所以只需要设置character-set-client字符集。
要处理中文，则可以将character-set-server和character-set-client均设置为GB2312，如果要同时处理多国语言，则设置为UTF8。
在执行SQL语句之前，将MySQL以下三个系统参数设置为与服务器字符集character-set-server相同的字符集。
character_set_client：客户端的字符集。
character_set_results：结果字符集。
character_set_connection：连接字符集。
设置这三个系统参数通过向MySQL发送语句：set names gb2312
第二种方法是修改MySQL配置文件my.cnf，如果是在文件中相应位置添加如下代码，以GBK编码为例，
default-character-set = gbk
########################
[client]
default-character-set = gbk
[mysqld]
default-character-set = gbk
#########################
修改结束以后，保存，然后使用客户端登录
#mysql -u root -p
在客户端中输入
>status;
则显示当前编码状态。
关于GBK、GB2312、UTF8的区别请参考其他文章。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- 使用jQuery Autocomplete(自动完成)插件
- 使用jQuery Autocomplete(自动完成)插件
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
- Jquery(十一)实战表单验证与自动完成提示插件
- 使用jQuery Autocomplete（自动完成）插件
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
- [乐意黎转载]从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
- 使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进了键盘上下选择体验)
- 使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配
- 使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配
- jquery 模拟类搜索框自动完成搜索提示功能(改进)
- jQuery 教程 (十一) 实战表单验证与自动完成提示插件 .NET
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
- jquery 模拟类搜索框自动完成搜索提示功能(改进)
- jQuery自动完成插件Autocomplete使用实例
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件