2015年9月16日 星期三

jQuery.textcomplete JQuery自動完成

Autocomplate可提高文字輸入的速度,有幾種處理方式,可用Ajax及時從資料庫存取,這次是從js檔中讀取可提高讀取速度,也可降低伺服器的Loading

參考資料:https://github.com/yuku-t/jquery-textcomplete
Demo:http://yuku-t.com/jquery-textcomplete/

需求
  • jQuery (>= 1.7.0) OR Zepto (>= 1.0)
使用方式



//頁面載入時套用
 $(document).ready(function () {
            SetTextarea();
        })
//根據不同的textarea套用不同的搜尋字庫
        function SetTextarea() {
            autocomplate(0, wordsS);
            autocomplate(1, wordsO);
            autocomplate(2, wordsA);
            autocomplate(3, wordsP);
        }
        function autocomplate(index, words) {
            $(".comTextarea").eq(index).textcomplete([
           {
//可比對中英文,
               match: /([\u4e00-\u9fa5_a-zA-Z0-9]{1,})$/,
               search: function (term, callback) {
                   callback($.map(words, function (word) {
                       return word.toLowerCase().indexOf(term) != -1 ? word : null;
                   }));
               },
               index: 1,
               replace: function (word) {
                   return word.split('-')[0] + ' ';
               },
               context: function (text) { return text.toLowerCase(); }
           }
            ], {
                onKeydown: function (e, commands) {
                    if (e.ctrlKey && e.keyCode === 74) { // CTRL-J
                        return commands.KEY_ENTER;
                    }
                }
            });
        };

沒有留言:

張貼留言

2014 © All Right Reserved
Distributed By Free Blogger Templates | Theme By Way2themes