为jquery.AutoComplete添加触发事件

上次为jQuery.AutoComplete加上了提示的功能，详情请访问我的博客：《如何让jquery.Autocomplete支持提示？》，这一次，我需要再给jQuery.autoComplete添加一个onBegin的参数，什么意思呢？

我们知道这个插件有一个extraParams的参数，因为jquery.autoComplete只支持q和limit两个参数，假如有这样的情况，我们需要向服务器提交更多参数怎么办呢，幸好，作者为我们提供一个扩展参数，就是extraParams。extraParams好是好，可是不幸的是，它是一个死的参数，有时候，我们需要提交一个活的参数到服务器。举例说明，比如说我们有一个公司名称的自动完成功能，但我们同时需要向服务器提供一个城市的参数，正常的情况下没有问题。但当城市的名称是由用户选择的时候，就有问题了，也就说，这个城市的名称是根据用户选择而实时变化的，这个时候，现有的jquery.autoComplete就无能为力了。

这个时候我们就要考虑修改修改一下jquery.autoComplete了，我们先看一下代码，代码有一个onChange事件，这是一个解发事件，我们可以在这里添加一个回调函数来解决问题。首先我们要为options中添加一个参数叫onBegin，大致就在400行左右吧，有一行这样的代码：

$.Autocompleter.defaults =

我们在后面添加一段

onBegin: null,

然后我们找到onChange事件，约在226行，代码如下：

function onChange(crap, skipPrevCheck)

在函数时里面添加如下代码：

            if (options.onBegin) {
                var op = options.onBegin(options);
                if (op) {
                    $.extend(options, op);
                }
            }

这段代码被修改过后看起来就像这样：

function onChange(crap, skipPrevCheck) {
            //2010-01-27 by conis，添加onBegin函数，以便在启动onChange的时候，可以重新设置options
            if (options.onBegin) {
                var op = options.onBegin(options);
                if (op) {
                    $.extend(options, op);
                }
            }
 
            //end
            if (lastKeyPressCode == KEY.DEL) {
                select.hide();
                return;
            }
 
            var currentValue = $input.val();
 
            if (!skipPrevCheck &amp;&amp; currentValue == previousValue)
                return;
 
            previousValue = currentValue;
 
            currentValue = lastWord(currentValue);
            if (currentValue.length &gt;= options.minChars) {
                $input.addClass(options.loadingClass);
                if (!options.matchCase)
                    currentValue = currentValue.toLowerCase();
                request(currentValue, receiveData, hideResultsNow);
            } else {
                stopLoading();
                select.hide();
            }
        };

再来看调用：

 $("#txtName").autocomplete(data, {
        caption: "输入中文/全拼/简拼/英文，使用↑↓可以选择",
        mustMatch: true,
        width: 260,
        max: 10,
       onBegin: function(options) {
            var city= $("#txtCity").val();
            if (city&amp;&amp; city!= "")
                options.extraParams.city= city;
            return options;
        }
});

什么意思呢，其实做的只有三步：

在options中添加一个onBegin的参数
在onChange中判断onBegin是否有赋值，如果有，则调用这个函数，返回将返回值合并到options中去
调用的时候，在onBegin函数中添加一些业务逻辑，并可以重新设置options

就这样，我们不仅可以达到动态去添加extraParams参数，而且还可以动态地修改其它options参数，这个onBegin在用户改变输入框的值就会触发。

本文来自涂雅[http://iove.net/]，原文链接：http://iove.net/archives/1505.html，网站转载请注明来源于涂雅并保留原文链接，否则视为侵权。

嗯，或者你也可以收听我的微博，腾讯微博(主要用这个，其他的看我的个人介绍)

我写博客常常出现错别字，常常错得还很离谱，有时候我自己看了第二遍都骂我自个儿，但我又不习惯重复审查，纠结啊...各位看到啥错别字或者不明白的地方，请给我留言指出来，感谢感谢。

5个评论在 "为jquery.AutoComplete添加触发事件"

云帆
2010-7-9 11:00 回复TA

onBegin: function(options) { var city= $(“#txtCity”).val(); if (city&& city!= “”) options.extraParams.city= city; return options; }

第二次输入的时候，caption 不会变化了！

怎么改进

涂雅
2010-7-9 11:36 回复TA
呵呵，你自己查一下吧，我最近真是没时间，抱歉，可能是Bug，也可能是其它原因，要是找到答案别忘记给我留言，这样其它读者就方便了

青椒
2010-2-10 13:01 回复TA

如果我要动态修改caption的值怎么改？

涂雅
2010-2-10 15:14 回复TA
请查看我的另一篇文章，可以在我改过后的jquery.autoComplete的onBegin中修改
如：
onBegin: function(options){
options.caption = ‘动太的caption’;
return options;
}

详细请访问：http://conis.cn/1505/
- libra
  2011-5-24 17:12 回复TA
  我添加了动态的action 但是当我输入关键字不存在的时候我要给个提示怎么办啊