jQuery的搜索关键词自动匹配插件-个人开发

刚看到博客园首页上有个这个插件，刚好自己也写了一个，不过没有，可以提供大家参考参考，不说废话，贴出插件代码

插件代码部分：

       opts._this.live("blur",function(){
            $("."+opts.m_list).hide()
        });
        opts._this.live("focus",function(){
            opts.this2=$(this);var s=0
                opts.this2.live("keydown",function(e){
                    if(e.keyCode=="40"){
                        if(s<a("."+opts.m_list+" ."+opts.m_item).length){
                            a("."+opts.m_list+" ."+opts.m_item).eq(s).addClass(opts.active).siblings(" ."+opts.m_item).removeClass(opts.active)
                            s++
                        }
                }else if(e.keyCode=="38"){
                    if(s>0){
                        s=s-1
                        a("."+opts.m_list+" ."+opts.m_item).eq(s).addClass(opts.active).siblings(" ."+opts.m_item).removeClass(opts.active)
                    }
                }else if(e.keyCode=="13"){
                    var m_str=a("."+opts.m_list+" ."+opts.active+" ."+opts.m_item_c).text()
                    a(this).attr("value",m_str)
                    a("."+opts.m_list).hide()
                    opts.this2.live("keyup",function(e){move(opts.position)})
                }else{pms()}
                });
                move()
            });

在输入框获取焦点和输出焦点时初始化状态，同时绑定有键盘事件，该事件是通过键盘操控指向内容，

var pms=function(){
            opts.this2.live("keyup",function(e){
                var mm=opts._this.attr("value");
                a("."+opts.m_list+" ."+opts.m_item).each(function(index){
                    a(this).find("."+opts.m_item_c).text(mm+opts.position[index])
                });
                if(a("."+opts.m_list).css("display")=="none"){a("."+opts.m_list).show()}
                if(opts._this.attr("value")==""){$("."+opts.m_list).hide()}
            });    
        }

释放鼠标事件执行方法

    var move=function(){
            a("."+opts.m_list+" ."+opts.m_item).hover(function(){
                $(this).addClass(opts.active)
            },function(){
                    $(this).removeClass(opts.active)
                    });
            a("."+opts.m_list+" ."+opts.m_item).live("mousedown",function(){
                var j_str=$(this).find(".email_domain").text()
                opts._this.attr("value",j_str)    
            });
            a("."+opts.m_list+" ."+opts.m_item).each(function(index){
                $(this).find("."+opts.m_item_c).text(opts.position[index])
            });
            $("."+opts.m_list).hide()    
            }
        }

鼠标事件执行方法，并同时在事件中释放内容，

这样 一个比较简单的输入框插件就完成了

调用代码：

$(function() {
        $('#username').hilight({    
             m_list:"email_tip_wrap",/**提示显示标题部分，初始化为隐藏**/
             m_item:"email_tip",/**提示内容列表**/
             active:"current",/**选中标题hover效果**/
             m_item_c:"email_domain"/**由于客户最早要气的是email固定不变，所以这边加了这个参数，可以不要**/

            });
        });

html部分，这个插件做的时候是固定的几个email，所以在做的时候列表被写死，如果涉及到数据库时，只要在ul循环相应的li就可以获取到提示字相应的内容 ，改进空间比较大，使用比较方便灵活，由于是个人开发，只关注这一项功能，不存在其他杂七杂八的代码。

<div style="202px;position:relative;margin:10px">
                    <input id="username" type="text" class="text_put" autocomplete="off">
                    <div class="email_tip_wrap" style="display:none">
                        <ul>
                            <li class="tip_intro">请选择邮箱类型：</li>
                            <li class="email_tip">
                                <span class="user_input"></span>
                                <span class="email_domain">@duobei.com</span>
                            </li>
                            <li class="email_tip">
                                <span class="user_input"></span>
                                <span class="email_domain">@qq.com</span>
                            </li>
                            <li class="email_tip">
                                <span class="user_input"></span>
                                <span class="email_domain">@gmail.com</span>
                            </li>
                            <li class="email_tip">
                                <span class="user_input"></span>
                                <span class="email_domain">@163.com</span>
                            </li>
                            <li class="email_tip">
                                <span class="user_input"></span>
                                <span class="email_domain">@126.com</span>
                            </li>
                            <li class="email_tip">
                                <span class="user_input"></span>
                                <span class="email_domain">@sina.com</span>
                            </li>
                            <li class="email_tip">
                                <span class="user_input"></span>
                                <span class="email_domain">@sohu.com</span>
                            </li>
                            <li class="email_tip">
                                <span class="user_input"></span>
                                <span class="email_domain">@hotmail.com</span>
                            </li>
                        </ul>
                    </div>
            </div>

头一次贴代码，希望对大家有用