用jquery实现的邮编查询(可以自动提示城市)

最新推荐文章于 2019-08-03 14:43:08 发布

xss23into

最新推荐文章于 2019-08-03 14:43:08 发布

阅读量616

点赞数

分类专栏： html 文章标签： jQuery json CSS Ajax XML ViewUI

本文链接：https://blog.csdn.net/xss23into/article/details/83405029

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML:

<!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>
    <title>小小的工具 - Bo工具网 一网知天下</title>
    <link href="css/Tool.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="Zip" class="Mainbox" style="width: 310px; left: 200px; top: 50px;">
        <div id="Ziphead" class="title">
            邮编区号查询(地区会自动提示)</div>
        <div id="ZipContent" class="content">
            地区：<input type="text" class="textinput" id="txtZip" /><input type="button" class="btn"
                id="btnZip" value="查询" />
        </div>
        <div id="Zipresult" class="inforesult">
        </div>
    </div>
   
    <div id="show">
    </div>

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script src="js/Tool.js" type="text/javascript"></script>

</body>
</html>

tool.js

/*
    author:caedmon
    web:http://www.botool.com/
*/

$(document).ready(function() {
    $("#txtZip").keyup(function(e) {
        var obj = $("#txtZip");
        var offset = obj.offset();
        var topvalue = offset.top + obj.height() + 5;
        var leftvalue = offset.left;
        $("#show").css({ left: leftvalue, top: topvalue });
        keysearch(e)
    });

    $("#btnZip").bind("click", function() {
        $("#Zipresult").html('');
        var keyvalue = $("#txtZip").val();
        if ($.trim(keyvalue) == '') {
            $("#Zipresult").html("<span style='font-weight:bold;color:#575757'>地区不能为空:)</span>");
            $("#Zipresult").slideDown('slow');
            return;
        }
        $.ajax({
            url: 'zip.xml', datatype: 'xml',
            success: function(xml) {
                $(xml).find("Zips>Citycode").each(function() {
                    var temp = $(this).attr("city");
                    if (temp == keyvalue) {
                        $("#Zipresult").html("<span style='font-weight:bold;color:#575757'>" + keyvalue + "邮编:" + $(this).attr("zip") + "</span><span style='padding-left:10px;font-weight:bold;color:#575757'>区号:" + $(this).attr("code") + "</span>");
                        $("#Zipresult").slideDown('slow');
                    }
                })
            },
            beforeSend: function() {
            },
            complete: function() {
            }
        })
    })
})

function keysearch(e) {
    if (e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 27 || e.keyCode == 9) {
        //键盘事件
        //向下按键
        if (e.keyCode == 40) {
            if ($("#show li.select").next().text() != "") {
                $("#show li.select").removeClass("select").addClass("unselect").next().removeClass("unselect").addClass("select");
            }
            else {
                $("#show li.select").removeClass("select").addClass("unselect");
                $("#show li:first").removeClass("unselect").addClass("select");
            }
        }
        //向上按键
        if (e.keyCode == 38) {
            if ($("#show li.select").prev().text() != "") {
                $("#show li.select").removeClass("select").addClass("unselect").prev().removeClass("unselect").addClass("select");
            } else {
                $("#show li.select").removeClass("select").addClass("unselect");
                $("#show li:last").removeClass("unselect").addClass("select");
            }
        }
        //回车按键
        if (e.keyCode == 13) {
            var value = $("#show li.select").text();
            if (value.length > 1)
                $("#txtZip").val(value);
            hide();
        }
    }
    else {
        var keyvalue = $("#txtZip").val();
        if (keyvalue.length > 0) {
            bindData(keyvalue);
        }
        else {
            hide()
        }
    }
}
function hide() {
    $("#show").hide();
}
function bindData(key) {
    var result = "[";
    $.ajax({ url: 'zip.xml', datatype: 'xml',
        success: function(xml) {
            $(xml).find("Zips>Citycode").each(function() {
                var temp = $(this).attr("city");
                if (temp.indexOf(key) > 0 || temp.indexOf(key) == 0) {
                    result = result + "{\"city\":\"" + temp + "\"},";
                }
            })
            if (result != '[') {
                result = result.substring(0, result.length - 1);
                result = result + "]";
            }
            else
                return;

            var json = eval(result);
            if (json != null) {
                var content = "";
                $.each(json, function(i) {
                    if (i < 11)
                        content += '<li class="unselect">' + json[i].city + '</li>';
                })
                //content += "</ul>";
                $("#show").html(content);
                $("#show").show();
                $("#show li").mouseover(function() {
                    $("#show li.select").removeClass("select").addClass("unselct");
                    $(this).removeClass("unselect").addClass("select");
                }).mouseout(function() {
                    $(this).removeClass("select").addClass("unselect");
                }).click(function() {
                    var value = $("#show li.select").text();
                    if (value.length > 1)
                        $("#txtZip").val(value);
                    hide();
                })
            }

        }
    })
}

xss23into

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jquery实现的邮编查询(可以自动提示城市)

HTML:&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;..
复制链接

扫一扫

专栏目录