首页 新闻 搜索 专区 学院

百度的搜索框效果如何实现的???

0
悬赏园豆:100 [待解决问题]

如图 百度的搜索框, 当文本框失去焦点时,浮动层就消失,但点击浮动层时,文本框不会失去焦点

qzp_518的主页 qzp_518 | 初学一级 | 园豆:102
提问于:2013-11-05 09:45
< >
分享
所有回答(5)
0

如图,图碎了

iEvent | 园豆:529 (小虾三级) | 2013-11-05 09:56
0

试了一把,

还是很容易实现的,当在文本框输入字符后,会触发一个函数跨域取与输入字符匹配的关键字(参考:http://www.cnblogs.com/twobin/p/3395086.html ),然后生成下拉框,

然后点击下拉框的任一一项(注:此时文本框的焦点已失去,LZ可细看一下),把下拉框的值填入文本框中然后清除下拉框

Zery | 园豆:6139 (大侠五级) | 2013-11-05 09:56
0

谁说点击浮动层不会失去焦点,我点了后,浮动层就消失了。这个很简单呀,点击层后把焦点重新设置到搜索框

空明流光 | 园豆:42 (初学一级) | 2013-11-05 11:40
0
var MyjQuery = {};
var rowNo= 0
MyjQuery.seekdiv = new Object({
    /*
    提示框
    event:事件
    txtid:文本框ID
    txtvalue:文本框的值
    array:进行搜索的数组
    scrollbar:有无滚动条,yes表示有,no表示无。
    count:提示框的展示条数
    width,height:宽高
    */
    SearchEngine: function(event, txtid, txtvalue, array, scrollbar, count, width, height) {
        if (scrollbar == "yes") {
            $("body").append("<div id='flydiv' class='leave' style='position:absolute; display:none;right: 0px;top:0px;background-color:#CEE5F7;width:" + width + "px;height:" + height + "px;overflow:auto;overflow-x:hidden;'><iframe id='iframe' src='./js/HighlyHint/iframe.htm' style='position:absolute; visibility:inherit; top:0; left:0; width:1000px;height:" + height + "; z-index:-1;marginwidth='0' marginheight='0' frameborder='0' _filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';'></iframe></div>");
        }
        else {
            $("body").append("<div id='flydiv' class='leave' style=' position:absolute;right: 0px;top:0px;background-color:#CEE5F7;'><iframe id='iframe' src='./js/HighlyHint/iframe.htm' style='position:absolute; visibility:inherit; top:0; left:0; width:" + width + ";height:" + height + "; z-index:-1;marginwidth='0' marginheight='0' frameborder='0' _filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';'></iframe></div>");
        }


        var divX = $("#" + txtid).offset().top + 20;
        var divY = $("#" + txtid).offset().left;
        $("#flydiv").css("top", divX);
        $("#flydiv").css("left", divY);
        //$("#iframe").attr("src", "../js/HighlyHint/iframe.htm");


        $("#flydiv").append("<table width='" + width + "' border='0' cellpadding='3' cellspacing='1' id='tb'></table>");
        if (txtvalue == "") {
            array = "";
            $("#tb tr").remove();
            $("#flydiv").remove();
            $("#flydiv").hide();
        }
        var appendstr = array;
        var tszsz = "";
        var appendstrleng = appendstr.length;
        //根据行数的增加调整iframe的高度
        var _height_tr = parseInt(height) / 30;
        if (appendstrleng > _height_tr) {
            $("iframe").css("height", parseInt(height) + 20 * (appendstrleng - _height_tr) + "px");
            //alert(parseInt(height) + 20 * (appendstrleng - _height_tr));
        }
        for (var i = 0; i < appendstrleng; i++) {

            if (count == 0) {
                tszsz += "<tr id='tr_" + i + "' class='clickrow' onmousemove='MyjQuery.seekdiv.mousemove(" + i + ")' onmouseout='MyjQuery.seekdiv.mouseout(" + i + ")' ><td>" + appendstr[i] + "</td></tr>";
            }
            else {
                if (i < count) {//限定条数
                    tszsz += "<tr id='tr_" + i + "' class='clickrow' onmousemove='MyjQuery.seekdiv.mousemove(" + i + ")' onmouseout='MyjQuery.seekdiv.mouseout(" + i + ")' ><td>" + appendstr[i] + "</td></tr>";
                }
            }
        }
        $("#tb tr").remove();
        if (tszsz.length > 0) {
            $("#flydiv").show();
        } else {
            $("#flydiv").hide();
        }
        $("#tb").append(tszsz);
        MyjQuery.seekdiv.ok(event, txtid);

        $(".clickrow").click(function() {
            var id = $(this).attr("id");
            document.getElementById(txtid).value = document.getElementById(id).innerText;
            $("#tb tr").remove();
            $("#flydiv").remove();
            $("#flydiv").hide();
            $("#" + txtid).focus();
        });

        $(".leave").mouseleave(function() {
            $("#tb tr").remove();
            $("#flydiv").remove();
            $("#flydiv").hide();
        });

    },


    mouseout: function(i) {
        document.getElementById("tr_" + i).style.backgroundColor = "#CEE5F7";
    },
    mousemove: function(i) {
        document.getElementById("tr_" + i).style.backgroundColor = "#ECE9D8";
    },

    ok: function(event, inputId) {

        var tableId = 'tb';
        //事件的标识代码 
        if (event.keyCode == 38) {
            for (var k = 0; k < document.getElementById(tableId).rows.length; k++) {
                document.getElementById(tableId).rows(k).bgColor = "#CEE5F7";
            }
            if (rowNo == 0) {
                rowNo++;
            }
            if (document.getElementById(tableId).rows.length > 0) {

                document.getElementById(tableId).rows(--rowNo % document.getElementById(tableId).rows.length).bgColor = "#ECE9D8";
                //document.getElementById(inputId).value = document.getElementById(tableId).rows(rowNo % document.getElementById(tableId).rows.length).innerText;
            }

        }
        //事件的标识代码 
        if (event.keyCode == 40) {
            for (var k = 0; k < document.getElementById(tableId).rows.length; k++) {
                document.getElementById(tableId).rows(k).bgColor = "#CEE5F7";
            }
            if (document.getElementById(tableId).rows.length > 0) {
                document.getElementById(tableId).rows(++rowNo % document.getElementById(tableId).rows.length).bgColor = "#ECE9D8";
                //document.getElementById(inputId).value = document.getElementById(tableId).rows(rowNo % document.getElementById(tableId).rows.length).innerText;
            }
        }

        if (event.keyCode == 13) {
            if (document.getElementById(tableId).rows.length > 0) {
                document.getElementById(inputId).value = document.getElementById(tableId).rows(rowNo % document.getElementById(tableId).rows.length).innerText;
            }
            $("#tb tr").remove();
            $("#flydiv").remove();
            $("#flydiv").hide();
        }
    }
});
View Code

自己写的搜索窗口引擎,你可以试试...效果还过得去,大家找找bug

var d= ["本人或户主", "配偶", "子", "女 ", "孙子、孙女或外孙子、外孙女", "父母", "祖父母或外祖父母", "兄、弟、姐、妹", "家庭内其他关系", "非家庭关系成员"];
MyjQuery.seekdiv.SearchEngine(event, txtid, txtvalue, d, "no", 0, "300", "0");

拾梦小侠ด้้้ | 园豆:713 (小虾三级) | 2013-11-05 13:23
0

jquery autocomplete 什么焦点消失啥的。。放在事件里面处理吧。。。

孑孓子 | 园豆:226 (菜鸟二级) | 2013-11-08 15:19
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册