分享一個 @user 前端插件 - xishuai－IT工程師數位筆記本

文章出處

開源地址：https://github.com/yuezhongxin/Mention.js

插件效果：類似于微博或 github 中 @user 列表效果。

這是個二次開發的插件，花了幾天時間，對 Mention.js（作者 jakiestfu）進行了一些改進，主要是下面幾個方面：

增加 search 自定義：可以根據輸入的 @user-key，進行后臺動態查詢。
增加 textarea 跟蹤焦點：效果是用戶列表跟蹤在 textarea 輸入焦點，而不是在 textarea 底部，主要使用 textarea-caret-position.js 插件（用來獲取 textarea 當前焦點坐標）。
增加 under 選項：是否跟蹤焦點，默認為 false。
完善 matcher：主要是判斷是否要 search，比如 textarea 輸入內容，如何進行判斷查詢并顯示結果列表。
增加 simple：去除 bootstrap 的一些樣式效果，簡單化。
增加 select 值后增加空格。
增加 fixed 選項：是否固定列表，默認為 false。
增加 sort 選項：是否進行排序，默認為 false。
若干改進。

下面是四種配置和效果展示。

1. 默認效果

配置代碼：

<body>
    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention.css">
    <script src="../scripts/jquery-1.10.2.js"></script>
    <script type='text/javascript' src="../scripts/mention-typeahead.js"></script>
    <script type='text/javascript' src="../scripts/mention.js"></script>
    <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#full").mention({
                typeaheadOpts: {
                    search: search
                }
            });
        });

        function search(key) {
            //在這里可以寫后臺查詢代碼
            var data = [{
                name: 'Rob Dyrdek',
                image: 'http://placekitten.com/25/24'
            }, {
                name: 'Rick Bahner',
                image: 'http://placekitten.com/25/23'
            }];
            console.log("key:" + key);
            return data;
        }
    </script>
</body>

2. 列表跟隨焦點

配置代碼：

<body>
    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention.css">
    <script src="../scripts/jquery-1.10.2.js"></script>
    <script type='text/javascript' src="../scripts/mention-typeahead.js"></script>
    <script type='text/javascript' src="../scripts/mention.js"></script>
    <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#full").mention({
                typeaheadOpts: {
                    search: search,
                    under: true
                }
            });
        });

        function search(key) {
            //在這里可以寫后臺查詢代碼
            var data = [{
                name: 'Rob Dyrdek',
                image: 'http://placekitten.com/25/24'
            }, {
                name: 'Rick Bahner',
                image: 'http://placekitten.com/25/23'
            }];
            console.log("key:" + key);
            return data;
        }
    </script>
</body>

3. 簡化風格

配置代碼：

<body>
    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention-simple.css">
    <script src="../scripts/jquery-1.10.2.js"></script>
    <script type='text/javascript' src="../scripts/mention-typeahead.js"></script>
    <script type='text/javascript' src="../scripts/mention.js"></script>
    <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#full").mention({
                typeaheadOpts: {
                    search: search,
                    under: true
                }
            });
        });

        function search(key) {
            //在這里可以寫后臺查詢代碼
            var data = [{
                name: 'Rob Dyrdek',
                image: 'http://placekitten.com/25/24'
            }, {
                name: 'Rick Bahner',
                image: 'http://placekitten.com/25/23'
            }];
            console.log("key:" + key);
            return data;
        }
    </script>
</body>

4. 固定列表

配置代碼：

<body>
    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention-simple.css">
    <script src="../scripts/jquery-1.10.2.js"></script>
    <script type='text/javascript' src="../scripts/mention-typeahead.js"></script>
    <script type='text/javascript' src="../scripts/mention.js"></script>
    <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#full").mention({
                typeaheadOpts: {
                    search: search,
                    under: true,
                    fixed: true
                }
            });
        });

        function search(key) {
            //在這里可以寫后臺查詢代碼
            var data = [{
                name: 'Rob Dyrdek',
                image: 'http://placekitten.com/25/24'
            }, {
                name: 'Rick Bahner',
                image: 'http://placekitten.com/25/23'
            }];
            console.log("key:" + key);
            return data;
        }
    </script>
</body>