文本框键入特殊字符$添加自定义变量

//需求描述：文本框或文本域键入特殊字符时、下拉自定义列表，添加自定义格式的变量(本文键入$字符、添加格式为${text})
//输入字符与输出格式可自行变更
//功能包括方向键、enter键键盘控制;
//效果大致如图：

//基本思路是通过获取光标的位置来判断输入字符(单个键值也可用keyCode)
//话不多说、直接上代码
//文本框、文本域各出一例

<div class="wrap">
    <p class="title">键入$添加内置变量</p>
    <div class="box">
        <input type="text" class="control" id="input-control">
        <ul class="column-list">
            <li class="active">cmd</li>
            <li>correlated_events</li>
            <li>dst_ip</li>
            <li>dst_port</li>
            <li>host</li>
            <li>host_ip</li>
            <li>arg</li>
            <li>hostname</li>
            <li>IpAddress</li>
            <li>logstash_id</li>
            <li>message</li>
            <li>post_body</li>
            <li>referrer</li>
            <li>rule_id</li>
            <li>rule_name</li>
            <li>src_ip</li>
            <li>src_port</li>
            <li>TargetUserName</li>
            <li>`@timestamp`</li>
            <li>type</li>
            <li>uri</li>
            <li>user</li>

        </ul>
    </div>
    <div class="box">
        <textarea type="text" class="control" rows="6" cols="10" id="text-control"></textarea>
        <ul class="column-list">
            <li class="active">cmd</li>
            <li>correlated_events</li>
            <li>dst_ip</li>
            <li>dst_port</li>
            <li>host</li>
            <li>host_ip</li>
            <li>arg</li>
            <li>hostname</li>
            <li>IpAddress</li>
            <li>logstash_id</li>
            <li>message</li>
            <li>post_body</li>
            <li>referrer</li>
            <li>rule_id</li>
            <li>rule_name</li>
            <li>src_ip</li>
            <li>src_port</li>
            <li>TargetUserName</li>
            <li>`@timestamp`</li>
            <li>type</li>
            <li>uri</li>
            <li>user</li>
        </ul>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script>

    $(function () {
        var strIdx;//光标所处位置的字符串索引
        //输入$符号时触发展示字段列表
        var controls = $('.control');
        $.each(controls, function () {
            var key = 0,
　　　　　　　　　_this=$(this);

            _this.on('keyup', function (e) {
                var e = e || window.event;
                var keycode = e.charCode || e.keyCode;
                var val = _this.val(),
                        currList = _this.next('.column-list');
                strIdx = getTxt1CursorPosition(_this.attr('id'));
                var currStr = val.slice(strIdx - 1, strIdx);
                if (currStr == '$') {
                    currList.show();
                    //禁止input、textarea默认行为：enter换行、方向键
                    $(this).on('keydown', function (e) {
                        var e = window.event || arguments[0];
                        if (e.keyCode == 13 || e.keyCode == 38 || e.keyCode == 40|| e.keyCode == 37|| e.keyCode == 39) {
                            e.returnValue = false;
                            return false;
                        }
                    })
                } else {
                    currList.hide();
                    _this.off('keydown');
                }
                var len = currList.children().length;
                if (len > 0) {//键盘控制

                    if (keycode == 40) {
                        key++;
                        if (key > len - 1) key = 0;
                    } else if (keycode == 38) {
                        key--;
                        if (key < 0) key = len - 1;
                    } else if (keycode == 13) {
                        pushColumn(key, _this, strIdx);
                    } else {
                        key = 0;
                    }
                    currList.find('li').eq(key).addClass("active").siblings().removeClass("active");
                    currList.scrollTop(currList.find('li').eq(key).offset().top - currList.offset().top);//方向键滚动
                }
            }).on('blur',function () {
                _this.next('.column-list').hide();
            })
        })
        $('.column-list').on('click', 'li', function () {
            var _this = $(this),
                    idx = _this.index();
            _this.parent('.column-list').show();
            pushColumn(idx, _this.parent('.column-list').prev(), strIdx)
        })
        //输入转译字段
        function pushColumn(key, currInt, strIdx) {
            if (currInt.next('.column-list').get(0).style.display == 'block') {
                var text = $('.column-list li').eq(key).text();
                var currVal = currInt.val();
                currInt.val(currVal.substring(0, strIdx) + "{" + text + "}" + currVal.substring(strIdx, currVal.length));
                $('.column-list').hide();
                currInt.off('keydown');
            }

        }

    })
    //获取光标位置的字符串索引
    function getTxt1CursorPosition(selectorID) {
        var $input = document.getElementById(selectorID);
        var cursurPosition = 0;
        if ($input.selectionStart) {//非IE
            cursurPosition = $input.selectionStart;
        } else {//IE
            try {
                var range = document.selection.createRange();
                range.moveStart("character", -$input.value.length);
                cursurPosition = range.text.length;
            } catch (e) {
                cursurPosition = 0;
            }
        }
        return cursurPosition;//当前索引
    }
</script>

<style>
        *{
            margin:0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        .wrap{
            width:300px;
            margin: 0 auto;
            margin-top: 200px;
        }
        .box{
            position: relative;
            margin-bottom: 15px;
        }
        .control{
            width: 100%;
            padding: 8px 4px;
            height: auto;
            outline: none;
            border: none;
            border: 1px solid #cccccc;
        }
        .control:focus{
            border-color: #1AB394;
        }
        .column-list{
            display: none;
            position: absolute;
            left:0;
            line-height: 20px;
            background: #fff;
            color: grey;
            z-index: 10;
            border: 1px solid #1AB394;
            border-top: none;
            width: 100%;
            max-height: 200px;
            overflow: auto;
        }
        .column-list li{
            cursor: pointer;
            line-height: 20px;
            padding-left: 20px;
        }
        .column-list li.active{
            background: paleturquoise;
        }
        .title{
            text-align: center;
            line-height: 40px;
            font-family: '微软雅黑';
        }
    </style>

本文特殊字符$为组合键——shift+4，使用keyCode判断会多次触发，因此改用光标位置来判断字符串

如有bug或建议，欢迎指出~~