jquery.autocomplete.js 插件的自定義搜索規則

這二天開始用jquery.autocomplete這個自動完成插件。功能基本比較強大，但本身在實際需求中發現仍是有一處不足！
問題是這樣：當我定義了一個本地數據JS文件時，格式爲JSON式的數組。以下：

var stockInfoJson = [
    { name: "深發展A", code: "000001",spell:"sfza" },
    { name: "萬科A", code: "000002",spell:"wka"},
    { name: "ST 國 農", code: "000004",spell:"stgn" },
    { name: "世紀星源", code: "000005",spell:"sjxy" },
    { name: "深振業A", code: "000006" ,spell:"szya"},
    { name: "ST 達 聲", code: "000007" ,spell:"stds"},
    { name: "ST寶利來", code: "000008" ,spell:"stbll"},
    { name: "中國寶安", code: "000009" ,spell:"zgba"},
    { name: "S ST華新", code: "000010" ,spell:"ssthx"},
    { name: "山航B", code: "200152" ,spell:"shb"},
    { name: "*ST帝賢B", code: "200160" ,spell:"stdxb"},
    { name: "雷伊B", code: "200168" ,spell:"lyb"},
    { name: "寶石B", code: "200413",spell:"bsb" },
    { name: "小天鵝B", code: "200418" ,spell:"xteb"},
    { name: "粵高速B", code: "200429" ,spell:"agsb"},
    { name: "寧通訊B", code: "200468" ,spell:"ltxb"},
    { name: "晨鳴B", code: "200488" ,spell:"cmb"},
    { name: "珠江B", code: "200505" ,spell:"zjb"},
    { name: "閩燦坤B", code: "200512" ,spell:"mskb"},
    { name: "華電國際", code: "600027" ,spell:"hdgj"}
];

如今但願用戶輸入的內容在code及spell屬性中進行匹配。但默認的jquery.autocomplete.js插件，當用戶輸入內容時老是去匹配name.
經過查看源碼沒有發現有對此需求進行支持的相關屬性，這點倒不方便了！因此決定對jquery.autocomplete.js進行修改，使其支持自定義的匹配模式。
首先在429行添加一個事件

reasultSearch:null,// add by fengyan 添加一個自定義查詢結果的事件屬性

在$.Autocompleter.Cache中添加一個緩存數據變量450行

var allData = new Array();// add by fengyan 數組變量 緩存全部數據

在populate()方法中添加511行添加

allData.push(row);//add by fengyan 將每行數據存放剛纔定義的數組變量中

而後再在load: function(q)方法中568行添加一個判斷

//add by fengyan 調用用戶自定義查詢方法
else if(typeof(options.reasultSearch)=="function")
{
    var csub = [];
    $.each(allData, function(i, row) {
        var ms = options.reasultSearch(row,q);
        if(ms!=null && ms!=false)
        {
            csub.push(ms);
        }
    });
    return csub;            
}

而後前臺調用的時候可使用resultSearch屬性進行擴展咱們本身想要的查詢方式

$(function(){
    $("#suggest1").autocomplete(stockInfoJson, {
        minChars: 1,
        matchCase:false,//不區分大小寫
        autoFill: false,
        max: 10,
        formatItem: function(row, i, max,term) {
            var v = $("#suggest1").val();        
            return  row.name + " (" + row.code + ")";
            if(row.code.indexOf(v) == 0 || row.spell.indexOf(v)==0)
            {
                return  row.name + " (" + row.code + ")";
            }
            else
                return false;
        },
        formatMatch: function(row, i, max) {
            return row.name + " (" + row.code+")";
        },
        formatResult: function(row) {
            return row.code;
        },
        reasultSearch:function(row,v)//本場數據自定義查詢語法 注意這是我本身新加的事件
        {
            //自定義在code或spell中匹配
            if(row.data.code.indexOf(v) == 0 || row.data.spell.indexOf(v) == 0)
            {
                return row;
            }
            else
                return false;            
        }
    });
});

到些經過修改源文件達到知足需求的目的了！ 


運行效果如圖 

擴展方法本文已做詳細說明
若有須要的源碼的朋友能夠訪問 
源碼下載：下載代碼  download local