纯js仿百度自动搜索

浏览数：30 / 时间：2015年06月09日

首先准备搜索数据：

//船舶基本信息
var 
boatInfo = [
     { "船舶识别号": "CN20044677878", "中文船名":"海安机00238", "英文船名": "HAI AN JI 00238", "IMO编号": "－－", "初次登记号": "271204001844", "牌簿号": "fsf", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司","箱位":"50" 
,"主机功率":"8000"},
     { "船舶识别号": "aN20044677878", "中文船名": "江海安机00238", "英文船名": "JIANG HAI AN JI 22238", "IMO编号": "－－", "初次登记号": "271204001844", "牌簿号": "fdsd ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000" 
},
     { "船舶识别号": "bN20044677878", "中文船名":"南海安机00238", "英文船名": "NAN HAI AN JI 22222", "IMO编号": "－－", "初次登记号": "271204001844", "牌簿号": "dfsf ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000" 
},
      { "船舶识别号": "dN20044677878", "中文船名":"长江00238", "英文船名": "CHANG JIANG 33333", "IMO编号": "－－", "初次登记号": "271204001844", "牌簿号": "fggg ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000" 
},
      { "船舶识别号": "eN20044677878", "中文船名":"海风00238", "英文船名": "HAI FENG 00238", "IMO编号": "－－", "初次登记号": "271204001844", "牌簿号": "jhjg ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000" 
},
      { "船舶识别号": "fN20044677878", "中文船名":"海鸟00238", "英文船名": "HAI NIAO 00238", "IMO编号": "－－", "初次登记号": "271204001844", "牌簿号": "mmmf ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000" 
},
      { "船舶识别号": "gN20044677878", "中文船名":"黄海安机00238", "英文船名": "HUANG HAI AN JI 00238", "IMO编号": "－－", "初次登记号": "271204001844", "牌簿号": "mfg ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000"}];
var 
len = boatInfo.length;

然后准备两个样式类：

/*用于隐藏搜索到的数据*/ 
<br>.divhidden {
    position:absolute;
    border:1px solid 
#3475c7;
    display:none;
}

1	`/用于显示搜索到的数据/`

1	`.divshow { position:absolute; z-index:1000;` `/* 设置对象的层叠顺序 */` `border:1px solid` `#3475c7; display:block; }`

前台html如下：

</div>

添加一js文件：txtBoatId.js

$(function 
() {
    $("#txtBoatId").keyup(myfunction);//为文本框添加keyup事件
    $("#BoatId").click(function 
() {
        //把当前选中的值赋值给文本框
             $("#txtBoatId").val( $(this).val());
        }
        document.getElementById("divBoatId").setAttribute("class", "divhidden");
    });
    $(this).click(function 
() {
        var 
id = $(this);//当前点击的地方
        var 
idid = $("#BoatId");//
//        var ididid=$("#divBoatId");//如果不是电子div上，则让div消失
        if 
(id != idid) {
            document.getElementById("divBoatId").setAttribute("class", "divhidden");
        }
    });
    function 
myfunction() {
        //删除select的节点option
        document.getElementById("BoatId").options.length = 0;
        //获得文本框的值
        var 
txt = document.getElementById("txtBoatId").value;
        var 
reg = new 
RegExp(txt, "gi"); //正则表达式
 
            for 
(var 
i = 0; i < len; i++) {
                if 
(reg.test(boatInfo[i].船舶识别号)) {
                    var 
op = document.createElement("option");
                    op.innerHTML = boatInfo[i].船舶识别号;
                    document.getElementById("BoatId").appendChild(op);
                }
            }
            if 
(document.getElementById("BoatId").childNodes.length > 0) {
                if 
(document.getElementById("BoatId").childNodes.length > 5) {
                    document.getElementById("BoatId").setAttribute("size", "5");
                } else 
{
                    document.getElementById("BoatId").setAttribute("size", document.getElementById("BoatId").childNodes.length - 1);
                }
                document.getElementById("divBoatId").setAttribute("class", "divshow");
            }
 
         
    }
});