JS输入用户名自动显示邮箱后缀列表

---样式

<style type="text/css">
       
          .out_box
        {
            border: 1px solid #ccc;
            background: #fff;
            font: 12px/20px Tahoma;
        }
        .list_box
        {
            border-bottom: 1px solid #eee;
            padding: 0 5px;
            cursor: pointer;
        }
        .focus_box
        {
            background: #f0f3f9;
        }
        .mark_box
        {
            color: #c00;
        }
    </style>

 

----JS

<script type="text/javascript">
    (function ($) {
        $.fn.mailAutoComplete = function (options) {
            var defaults = {
                boxClass: "mailListBox", //外部box样式
                listClass: "mailListDefault", //默认的列表样式
                focusClass: "mailListFocus", //列表选样式中
                markCalss: "mailListHlignt", //高亮样式
                zIndex: 1,
                autoClass: true, //是否使用插件自带class样式
                mailArr: ["qq.com", "126.com", "163.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "sohu.com", "sina.com"], //邮件数组
                textHint: false, //文字提示的自动显示与隐藏
                hintText: "",
                focusColor: "#333"
                //blurColor: "#999"
            };
            var settings = $.extend({}, defaults, options || {});

            //页面装载CSS样式
            if (settings.autoClass && $("#mailListAppendCss").size() === 0) {
                $('<style id="mailListAppendCss" type="text/css">.mailListBox{border:1px solid #369; background:#fff; font:12px/20px Arial;}.mailListDefault{padding:0 5px;cursor:pointer;white-space:nowrap;}.mailListFocus{padding:0 5px;cursor:pointer;white-space:nowrap;background:#369;color:white;}.mailListHlignt{color:red;}.mailListFocus .mailListHlignt{color:#fff;}</style>').appendTo($("head"