為jquery.AutoComplete添加觸發事件

上次為jQuery.AutoComplete加上了提示的功能，詳情請通路我的部落格：《如何讓jquery.Autocomplete支援提示？》，這一次，我需要再給jQuery.autoComplete添加一個onBegin的參數，什麼意思呢？

我們知道這個插件有一個extraParams的參數，因為jquery.autoComplete隻支援q和limit兩個參數，假如有這樣的情況，我們需要向伺服器送出更多參數怎麼辦呢，幸好，作者為我們提供一個擴充參數，就是extraParams。extraParams好是好，可是不幸的是，它是一個死的參數，有時候，我們需要送出一個活的參數到伺服器。舉例說明，比如說我們有一個公司名稱的自動完成功能，但我們同時需要向伺服器提供一個城市的參數，正常的情況下沒有問題。但當城市的名稱是由使用者選擇的時候，就有問題了，也就說，這個城市的名稱是根據使用者選擇而實時變化的，這個時候，現有的jquery.autoComplete就無能為力了。

這個時候我們就要考慮修改修改一下jquery.autoComplete了，我們先看一下代碼，代碼有一個onChange事件，這是一個解發事件，我們可以在這裡添加一個回調函數來解決問題。首先我們要為options中添加一個參數叫onBegin，大緻就在400行左右吧，有一行這樣的代碼：

我們在後面添加一段

然後我們找到onChange事件，約在226行，代碼如下：

在函數時裡面添加如下代碼：

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 && currentValue == previousValue)
                return;
 
            previousValue = currentValue;
 
            currentValue = lastWord(currentValue);
            if (currentValue.length >= 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&& city!= "")
                options.extraParams.city= city;
            return options;
        }
});
           

什麼意思呢，其實做的隻有三步：

1. 在options中添加一個onBegin的參數
2. 在onChange中判斷onBegin是否有指派，如果有，則調用這個函數，傳回将傳回值合并到options中去
3. 調用的時候，在onBegin函數中添加一些業務邏輯，并可以重新設定options

就這樣，我們不僅可以達到動态去添加extraParams參數，而且還可以動态地修改其它options參數，這個onBegin在使用者改變輸入框的值就會觸發。

　　

注意：本文為我的獨立部落格鏡像部落格，自發表不再更新，原文可能随時被更新，敬請通路原文。同時，請大家不要在此評論，如果有什麼看法，請點選這裡：http://iove.net/1705/

本文來自http://iove.net，歡迎轉載，轉載敬請保留相關連結，否則視為侵權，原文連結：http://iove.net/1705/

轉載于:https://www.cnblogs.com/conis/archive/2010/01/27/1720396.html