• 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>

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

        

  • 相关阅读:
    js动态添加、删除行
    java内存问题排查及分析
    IDE 热部署配置
    Target JRE version (1.7.0_79) does not match project JDK version (java version "1.8.0_171"), will use sources from JDK: 1.7
    快速排序
    归并排序思想
    算法总结
    百度2013校园招聘笔试题(含整理的答案)
    浙江省委书记(习):加快推进节约型社会建设
    申论方面的经验
  • 原文地址:https://www.cnblogs.com/be-my/p/3599941.html
Copyright © 2020-2023  润新知