解决Jquery.autocomplete.js多参数的正确传递+中文编码+发送兼容FF+空格问题+返回值...

最新推荐文章于 2021-12-12 20:53:26 发布

redsky200905

最新推荐文章于 2021-12-12 20:53:26 发布

阅读量204

点赞数

分类专栏： JavaScript - JQUERY 文章标签： javascript json 后端 ViewUI

JavaScript - JQUERY 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在做多个参数时，需要extraParams参数，但我这里不止需要这个，还需要函数parse才能解决问题
另外，遇到firefox下支持中文不好的问题，原因是每次keydown都用了default然后onChange
故在第197行左右位置增加代码

.bind("input", function() {  
        onChange(0, true);  
    });

再则，遇到编码问题,将输入的值用encodeURIComponent包装两次，后端用URLDecoder.decode解2次，即包装q，而且遇到输入空格问题一并解决，在第367行左右：

q: encodeURIComponent($.trim(lastWord(term))),

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
        <script type="text/javascript" src="js/jquery.js">
        </script>
        <script type='text/javascript' src='js/jquery.bgiframe.min.js'>
        </script>
        <script type='text/javascript' src='js/jquery.ajaxQueue.js'>
        </script>
        <script type='text/javascript' src='js/thickbox-compressed.js'>
        </script>
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <script type='text/javascript' src='js/jquery.autocomplete.js'>
        </script>
        <link rel="stylesheet" type="text/css" href="js/thickbox.css" />
        <script type="text/javascript">
            $().ready(function(){
                var url_ = "action";
                $("#suggest13").autocomplete(url_, {
					delay : 10,
                    dataType: "json",
                    minChars: 1,
                    width: 310,
                    matchContains: true,
                    extraParams: {
                        url: function(){
return encodeURIComponent(encodeURIComponent("xxx"))
}
                    },
					parse: function(data){
                        return $.map(data, function(row){
                            return {
                                data: row,
                                value: row.name,
                                result: row.name
                            }
                        });
                    },
                    formatItem: function(row, i, max){
                        return row.name;
                    },
                    formatResult: function(row){
                        return row.name;
                    }
                }).result(function(e, item){
                   alert(item.lo);
                });                
            });
        </script>
    </head>
    <body>
        <input type="text" id="suggest13" />
    </body>
</html>