仿百度搜索功能

标签：

/**
 *鼠标选中某个li方法
 *1.参数obj：this
 */
function ulLiText(obj) {
    //检索条件可按名称字母查询
    $("#nameZm").val($(obj).text());
    //调用省级列表
    getAreaList();
    //隐藏检索信息
    $("#carName").hide();
}

//显示背景颜色
 $(‘#carName ul li‘).mouseover(function () {
        $(this).css("backgroundColor", "white");
    }).mouseout(function () {
        $(this).css("backgroundColor", "");
    });


        var i = -1;

                //键盘操作
                $(document).keyup(function (event) {

                    var num = Number($("#indexUl").val());
                    i = Number($("#indexUl").val());

                    if (event.keyCode == 13) {
                        //一组li的长度
                        var lenLi = $("#ulCarName li").length;

                        for (var i = 0; i < lenLi; i++) {
                            if (i == Number($("#indexUl").val())) {

                                $("#nameZm").val($("#ulCarName .li_" + i).text());
                                //调用省级列表
                                var currentIndex = $("#currentIndex").val();
                                //查询条件
                                var nameZm = $("#nameZm").val();
                                var list = {
                                    nameZm: nameZm,
                                    pageIndex: currentIndex
                                }
                                getAreaList(list);
                                //隐藏检索信息
                                $("#carName").hide();
                            }
                        }
                    } //向下
                    else if (event.keyCode == 40) {
                        //如果等于索引等于总行数
                        if ((Number($("#countRows").val()) - 1) == Number($("#indexUl").val())) {
                            i = -1;
                        }
                        i += 1;
                        $("#ulCarName .li_" + i).css("backgroundColor", "gray");
                        //隐藏域存储li的索引
                        $("#indexUl").val(i);
                    } //向上
                    else if (event.keyCode == 38) {
                        //如果等于索引等于0
                        if (num == 0) {
                            num = Number($("#countRows").val());
                        }
                        num = num - 1;
                        $("#ulCarName .li_" + num).css("backgroundColor", "gray");
                        //隐藏域存储li的索引
                        $("#indexUl").val(num);
                    };
                });

                //显示检索内容
                if ($("#nameZm").val() != "") {
                    // $("#carName").show();
                    for (var i = 0; i < resultData.length; i++) {
                        hmt += ‘<li onclick="ulLiText(this)" class="li_‘ + i + ‘"><a style="color:#000;">‘ + resultData[i].ReMark + ‘</a></li>‘
                    }
                    //显示检索内容
                    $("#ulCarName").empty().append(hmt);
                    //隐藏域存值
                    $("#countRows").val(resultData.length);
                    //鼠标悬浮加背景颜色
                    $(‘#carName ul li‘).mouseover(function () {
                        $(this).css("backgroundColor", "gray");
                    }).mouseout(function () {
                        $(this).css("backgroundColor", "");
                    });
                }

仿百度搜索功能

标签：

原文地址：http://www.cnblogs.com/wangtiantian/p/4987355.html