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();
})
}
}
})
}
分享到：
相关推荐
在网页开发中，"城市联动"是一种常见的交互设计，它允许用户在选择省份后，下拉框自动更新出对应的市一级选项，而不需要刷新整个页面。这种功能在很多需要地域选择的场景中非常实用，例如在线购物、招聘网站等。本...
jQuery Autocomplete是一款非常流行的JavaScript库，它为网页输入框提供了自动提示功能，极大地提升了用户体验。这个功能在许多网站上被广泛使用，例如搜索框、表单填充等场景。本篇文章将深入探讨jQuery ...
综上所述，jQuery Autocomplete插件以其强大的功能和易用性，成为了前端开发中实现搜索自动提示的首选工具。通过理解和掌握其核心功能和实现方法，开发者可以轻松地在项目中集成这一特性，提升用户体验。
通过以上步骤，我们可以实现一个类似机票预订网站的智能输入提示功能。这个过程涉及到了前端与后端的交互、数据处理、DOM操作和用户交互等多个方面，是Web开发中的一个典型应用场景。掌握这些技能对于提升网页的交互...
【jQuery京东商城城市联动城市选择代码】是一种常见的前端交互功能，用于实现用户在选择省份时，下拉框自动更新对应的城市列表。这个功能在电商网站中尤其常见，为用户提供便捷的地址选择方式，提高用户体验。这里...
标题“自动提示城市输入”可能指的是一个...通过以上这些技术和方法，我们可以构建一个高效、友好的自动提示城市输入功能，提升用户的使用体验。实际开发过程中，还需要结合具体的业务需求和用户行为进行优化和调整。
以上就是使用AJAX根据邮编自动完成地址信息的基本实现。在实际项目中，你可能还需要考虑错误处理、请求优化（如缓存、超时等）、用户体验（如加载指示器、错误提示等）等方面，确保功能的稳定性和可用性。
总结，"jQuery字母查询城市地区代码"是一个实用的前端工具，它通过jQuery库实现了高效的城市地区查询功能，极大地提高了用户的输入效率。理解其工作原理和实现方式，对于提升网页交互体验具有重要意义。
通过jQuery，我们可以实现下拉框的动态加载，即当用户选择一个层级时，下一个层级的选项会自动加载出来，这样既节省页面空间，又提供了良好的用户体验。 实现这个特效的关键技术包括： 1. **事件绑定**：jQuery...
标题中的“jQuery实现省市联动”是指在Web应用中，通过jQuery库来实现在选择省份时，下拉框（或其它选择组件）中的城市选项能够自动更新，以展示与所选省份对应的城市列表。这种功能常见于地址输入或者注册表单中，...
jQuery有多种插件和方法可以实现这一目标，确保无论用户使用何种设备，都能方便地选择地区、城市和职位。 7. **用户体验优化**：jQuery还可以用来增强用户体验，比如添加过渡效果、提示信息等，使选择过程更加直观...
它使得用户可以在一个下拉菜单中选择省份，然后根据所选省份自动加载相应的城市列表，再接着选择城市后，会显示对应城市的区县选项。这种联动效果可以极大地提升用户体验，降低用户输入的复杂性。 **jQuery插件的...
在本资源"jQuery实现的城市下拉框菜单搜索选择功能源码.zip"中，开发者使用了流行的JavaScript库jQuery来实现这一功能。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及...
总结来说，实现“与后台结合的使用jQuery实现的联动选择框”涉及前端jQuery的事件监听和Ajax通信，以及后端接口的设计和数据返回。通过紧密的前后端协作，我们可以创建出响应迅速、用户体验优秀的联动选择框功能。
"jQuery智能提示文件(中文版+英文版)"是针对jQuery开发的一种增强用户交互体验的插件，它提供了一种高效的方法来实现下拉提示、自动完成等功能，提升用户在输入时的效率和便捷性。 **1. jQuery智能提示基本概念** -...
**jQuery Autocomplete 实现输入框智能提示** jQuery Autocomplete 是一个强大的组件，广泛应用于网页上的输入框，可以为用户提供实时的搜索建议或自动补全功能。这个组件通过与后端服务器进行异步通信（通常使用 ...
在IT行业中，jQuery是一个广泛使用的...以上就是关于使用jQuery实现省市区联动的详细步骤和原理，希望对你在开发相关项目时有所帮助。这个功能的实现既涉及DOM操作，又涉及到事件监听，是jQuery应用的经典示例。
为了提高用户体验并减轻服务器压力，我们可以利用jQuery这一强大的JavaScript库来创建一个高效的城市级联插件。本文将详细探讨jQuery城市级联插件的原理、实现方式以及其在实际项目中的应用。 首先，让我们了解...
本主题主要探讨如何使用jQuery来实现这种效果。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在实现无刷新级联的过程中，jQuery的主要作用是监听用户的交互，动态...