100分求助仿百度智能提示的一个小bug，求完美

共4个文件
Default.css
index.jsp(注意这个文件需要引入jquery)Ajax.jsp
jquery.Completion.js-----------------Default.css---------------------------
body
{
      margin: 0;
    padding: 0;
    }
.Completion-guess-list ul, li
{
    margin: 0;
    padding: 0;
list-style:none;
}
.Completion-guess-list
{
    overflow: auto;
    font-size: 12px;
    line-height: 180%;
    background: #fff;
}
.Completion-guess-list a
{
    color: #555;
    text-decoration: none;
    display: block;
    padding: 1px 6px;
    overflow: hidden;
    white-space: nowrap;
    font-family:Verdana,arial;
}
.Completion-guess-list a .c-total{float:right;color:green;}
.Completion-guess-list a:hover,.Completion-guess-list a.Completion-guess-list-hover
{
    background: #3399ff;
    color: #fff;
}
.Completion-guess-list a:hover span.c-total,.Completion-guess-list a.Completion-guess-list-hover span.c-total{color:#fff;}
.Completion-guess-list .c-hover{font-weight:700;}------index.jsp-------------------
<%@ page language="java" contentType="text/html; charset=utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/public/init.jsp"%>
<script src="jquery.Completion.js" type="text/javascript"></script>
    <link href="Default.css" rel="stylesheet" type="text/css" />
    <script>
       $(document).ready(function(){
            $.Completion({ Completion_Obj: $("#Input_Html"), Completion_Data_Url: "Ajax.jsp", Completion_Height: "auto", Completion_Obj_Show: $("#show"), Completion_Bool: true, Completion_Type_obj: $("#Type"), Completion_ClickCall: function () { alert("你按了回车"); }, Completion_Length: 0 });
        });
    </script>
</head>
<body>
    <!--动态设置查询类别(用于有几个文本补全时可以一个方法解决)-->
    <input type="text" id="Type" value="1" style="margin-left: 400px; margin-top: 100px;" />
    <!--输入值的文本框-->
    输入框:<input id="Input_Html" class="Completion-input" style="
        width: 200px" />
    <!--加载下拉显示-->
    <div id="show">
    </div>
</body>
</html>--------------Ajax.jsp-------------------<%@page import="net.sf.json.JSONArray"%>
<%@page import="net.sf.json.JSONObject"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% //获取输入文字
            String keyWord = request.getParameter("CompletionValue");
            //获取类型
            String TypeID =request.getParameter("CompletionType");
            //获取数量
            int Count = Integer.parseInt(request.getParameter("CompletionCount"),10);
           
            JSONArray  sa=new JSONArray();
            for(int i=0;i<10;i++){
            JSONObject jsonObject = new JSONObject();       
jsonObject.put("ComPletion_Name", "huangwuyi"+i);
jsonObject.put("ComPletion_Count", "444"+i);
sa.add(jsonObject);
            }
            //中国-------------%E4%B8%AD%E5%9B%BD
System.out.println("获取输入文字"+java.net.URLDecoder.decode(keyWord,"UTF-8"));
System.out.println("获取类型"+TypeID);
System.out.println("获取数量"+request.getParameter("CompletionCount"));
out.clear();
out.print(sa);
%>js

解决方案 »

  1.   

    --jquery.Completion.js--------------
    /*
    Name:Jquery Completion v1.0
    Author:zhouxiang
    website:http://www.zhou-xiang.com
    */
    (function ($) {
        $.Completion = function (setting) {
            //初始化配置
            var opts = $.extend({}, $.Completion.DefaultSetting, setting);
            //宽度
            var Completion_Width = null;
            //高度
            var Completion_Height = null;
            //数据源(ashx)访问路径
            var Completion_Data_Url = null;
            //对象
            var Completion_Obj = null;
            //要加载HTML的对象
            var Completion_Obj_Show = null;
            //对象距离左边距
            var Completion_Obj_MarginLeft = null;
            //对象距离上边距
            var Completion_Obj_MarginTop = null;
            //对象高度
            var Completion_Obj_Height = null;
            //最多显示多少条
            var Completion_Count = null;
            //大于多少个字符后进行AJAX
            var Completion_Length = null;
            //实时获取类型值的对象
            var Completion_Type_obj = null;
            //内容
            var Completion_Value = null;
            //类型/标识
            var Completion_Type = null;
            //是否开启类型判断
            var Completion_Bool = false;
            //按键计数
            var Completion_N = 0;
            //回车回调方法
            var Completion_ClickCall = null;
           
            //加载
            function Completion_Loading() {
                //初始化
                Init();
                //绑定事件
                Completion_Obj_AddEvent();
            }
            //初始化
            function Init() {
                //获取显示的对象
                Completion_Obj_Show = opts.Completion_Obj_Show;
                //获取对象
                Completion_Obj = opts.Completion_Obj;
                //获取对象宽度
                Completion_Width = Completion_Obj.width();
                //获取层显示高度
                Completion_Height = opts.Completion_Height;
                //获取访问数据库URL
                Completion_Data_Url = opts.Completion_Data_Url;
                //每次查询多少条记录
                Completion_Count = opts.Completion_Count;
                //获取对象高度
                Completion_Obj_Height = Completion_Obj.height();
                //获取左边距
                Completion_Obj_MarginLeft = Completion_Obj.offset().left;
                //获取上边距
                Completion_Obj_MarginTop = parseInt(Completion_Obj.offset().top) + parseInt(Completion_Obj_Height);
                //获取类型值的对象
                Completion_Type_obj = opts.Completion_Type_obj;
                //得到判断类型是否传入的值
                Completion_Bool = opts.Completion_Bool;
                //按回车键回调方法
                Completion_ClickCall = opts.Completion_ClickCall;
                //获取长度 
                Completion_Length = opts.Completion_Length;
            }
            //给对象添加事件
            function Completion_Obj_AddEvent() {
                //弹起
                Completion_Obj.keyup(function (event) {
                    switch (event.keyCode) {
                        //上键             
                        case 38:
                            break;
                        //下键              
                        case 40:
                            break;
                        //回车键              
                        case 13:
                            Completion_ClickCall();
                            break;
                        //按其他键 进行文本补全              
                        default:
                            Cimpletion_Bind();
                            break;
                    }            });
                //按下
                Completion_Obj.keydown(function (event) {
                    switch (event.keyCode) {
                        //回车键            
                        case 13:
                            break;
                        //上键              
                        case 38:
                         console.log("上键清除所有的选中样式");
                            if (Completion_N == 0) {
                                Completion_N = (Completion_Obj_Show.find("li").length - 1);
                            } else if (Completion_N != 0) {
                                Completion_N = Completion_N - 1;
                            }
                            Cimpletion_KeyUpDown();
                            break;
                        //下键              
                        case 40:
                         console.log("下键  清除所有的选中样式");
                            Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
                            if (Completion_N + 1 < Completion_Obj_Show.find("li").length) {
                                Completion_N = Completion_N + 1;
                            } else if (Completion_N + 1 == Completion_Obj_Show.find("li").length) {
                                Completion_N = 0;
                            }
                            Cimpletion_KeyUpDown();
                            break;
                        //不触发事件            
                        default:
                            break;                }
                });
            }
            //按键触发
            function Cimpletion_KeyUpDown() {
                //清除所有的选中样式,为什么这个地方清除了所有样式，那个鼠标悬浮的a标签的样式还存在呀
                Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
                //加载当前选中的文本到搜索框
               // Completion_Obj.val(Completion_Obj_Show.find("li").eq(Completion_N).find("ul").text());
                //加载选中样式
                Completion_Obj_Show.find("li").eq(Completion_N).find("a").addClass("Completion-guess-list-hover");
            }
            //mouse
            function MouseHover() {
                Completion_Obj_Show.find("li").mouseover(function () {
                    Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
                 console.log("MouseHover绑定样式");
                   // Completion_Obj.val($(this).find("ul").text());
                    Completion_N = Completion_Obj_Show.find("li").index(this);
                });
            }
            //绑定方法
            function Cimpletion_Bind() {
                //是否有传入类型
                if (Completion_Bool) {
                    //获取当前对象的类型标识
                    Completion_Type = Completion_Type_obj.val();
                }
                //获取当前对象的值
                Completion_Value =encodeURIComponent(Completion_Obj.val());
                //清除空格
                Completion_Value = Completion_Value.replace(" ", "");
                //执行验证
                Completion_Verification(Completion_Value);
                //判断长度
                if (Completion_Value.length > Completion_Length) {
                    //得到数据 构造HTML
                    Completion_Data_Bind();
                } else {
                    //隐藏
                    Completion_Obj_Show.hide();
                }
            }
            //验证
            function Completion_Verification(obj) {
                if (obj == "" || obj == null || obj == undefined) {
                    return false;
                }
            }
            //执行AJAX请求 得到数据
            function Completion_Data_Bind() {
             console.log("执行请求");
                $.ajax({
                    url: Completion_Data_Url,
                    //后台做处理判断CompletionType的值是否为空
                    data: { CompletionValue: Completion_Value, CompletionCount: Completion_Count, CompletionType: Completion_Type },
                    type: "post",
                    dataType: "json",
                    success: function (obj) {
                        //构造HTML
                        Completion_Add_Html(obj);
                    }
                });
            }
            //选中
            function Completion_Selected(obj) {
                //当选择文本之后 获取标签Completion下的文本
                Completion_Obj.val(obj.find("ul").text());
                //隐藏
                Completion_Obj_Show.hide();
            }
            //构造内容
            function Completion_Add_Html(obj) {
                var data = obj;
                //执行验证
                Completion_Verification(data);
                //申明变量保存LI标签HMTL
                var ComPletion_Li = "";
                if (data != null && data != undefined) {
                    for (var i = 0; i < data.length; i++) {
                        //执行验证是否为空
                        var dr = data[i];
                        //验证DR是否为空
                        Completion_Verification(dr);
                        //得到名称
                        var ComPletionName = dr.ComPletion_Name;
                        //标识搜索文字效果
                        ComPletionName = ComPletionName.replace(Completion_Value.toUpperCase(), "<span class='c-hover'>" + Completion_Value.toUpperCase() + "</span>");
                        //构造
                        ComPletion_Li += "<li><a href='javascript:;'><span class='c-total'>约" + dr.ComPletion_Count + "条记录</span><ul>" + ComPletionName + "</ul></a></li>";
                    }
                    //当ComPletion_Li不为空 则进行加载显示
                    if (ComPletion_Li != "") {
                        var Completion_Html = "<ul>" + ComPletion_Li + "</ul>";
                        //绑定显示
                        Completion_Obj_Html(Completion_Html);
                    } else {
                        //为空则隐藏
                        Completion_Obj_Show.hide();
                    }
                }
            }
            //绑定到控件
            function Completion_Obj_Html(html) {
                //显示
                Completion_Obj_Show.show();
                //清空原有HTML
                Completion_Obj_Show.html("")
                //设置样式
                Completion_Obj_Show.css({ "width": Completion_Width + 5, "height": Completion_Height, "border-width": "1px", "border-color": "#CCC", "border-top-width": "0px", "border-style": "solid", "position": "relative", "z-index": "100000", "margin-left": Completion_Obj_MarginLeft });
                //指定class 一般更改修改样式文件即可
                Completion_Obj_Show.attr("class", "Completion-guess-list");
        
      

  2.   

            //加载
                Completion_Obj_Show.html(html);
                //初始化 计数
                Completion_N = -1;
                MouseHover();
                //给LI标签添加选择事件
                Completion_Obj_Show.find("li").unbind("click").click(function () {
                    Completion_Selected($(this));
                });
                //防止冒泡
                Completion_Obj_Show.click(function (e) {
                    e.stopPropagation();
                })
                //防止冒泡
                Completion_Obj.click(function (e) {
                    Cimpletion_Bind();
                    e.stopPropagation();
                });
                //点击document 隐藏显示对象
                $(document).click(function () {
                    Completion_Obj_Show.hide();
                });
            }
            //加载
            Completion_Loading();
        };
        
        //默认配置
        $.Completion.DefaultSetting = {
            //高度
            Completion_Height: null,
            //与后台交互的ashx文件路径
            Completion_Data_Url: null,
            //对象
            Completion_Obj: null,
            //下拉显示对象
            Completion_Obj_Show: null,
            //是否开启类型区分
            Completion_Bool: false,
            //一次查询多少条
            Completion_Count: 10,
            //即时获取类型值的对象
            Completion_Type_obj: null,
            //回车按键 回调方法
            Completion_ClickCall: null,
            //长度
            Completion_Length: null
        };
    })(jQuery);
      

  3.   

    你样式写的有问题，悬浮的时候a:hover伪类一直起作用，当然清楚不掉，需要通过.Completion-guess-list a.Completion-guess-list-hover来控制，而不是通过:hover伪类来控制
    .Completion-guess-list a:hover,.Completion-guess-list a.Completion-guess-list-hover
    {
        background: #3399ff;
        color: #fff;
    }去掉2个a的伪类/*.Completion-guess-list a:hover,*/.Completion-guess-list a.Completion-guess-list-hover
    {
        background: #3399ff;
        color: #fff;
    }
    /*.Completion-guess-list a:hover span.c-total,*/.Completion-guess-list a.Completion-guess-list-hover span.c-total{color:#fff;}
    .Completion-guess-list .c-hover{font-weight:700;}
    MouseHover增加一句
            //mouse
            function MouseHover() {
                Completion_Obj_Show.find("li").mouseenter(function () {
                    Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
                 console.log("MouseHover绑定样式");
                 // Completion_Obj.val($(this).find("ul").text());
    ////////////////////////////////////////////////////////////////////
                 $('a', this).addClass("Completion-guess-list-hover")//添加hover样式，
    ////////////////////////////////////////////////////////////////////
                 Completion_N = Completion_Obj_Show.find("li").index(this);
                 console.log("MouseHover绑定样式" + Completion_N);
                });
            }