根据拼音或名称联动显示符合条件的数据
程序员文章站
2022-03-05 20:26:43
...
根据拼音或名称联动显示符合条件的数据
一、例子：
二、页面引入jquery.js，代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input id="searchCityName" type="text" placeholder="城市名称/ 拼音" />
<ul>
<li pinyin="beijing" cityname="北京">
<a href="">北京</a>
</li>
<li pinyin="shanghai" cityname="上海">
<a href="">上海</a>
</li>
<li pinyin="guangzhou" cityname="广州">
<a href="">广州</a>
</li>
<li pinyin="shenzhen" cityname="深圳">
<a href="">深圳</a>
</li>
<li pinyin="tianjin" cityname="天津">
<a href="">天津</a>
</li>
</ul>
</body>
<script>
function searchCity() {
var searchCityName = $("#searchCityName").val();
if (searchCityName == "") {
$("ul li").show();
} else {
$("ul li").each(
function() {
var pinyin = $(this).attr("pinyin");
var cityName = $(this).attr("cityName");
if (pinyin.indexOf(searchCityName) != -1 || cityName.indexOf(searchCityName) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
}
}
$('#searchCityName').bind('input propertychange', function() {
searchCity();
});
</script>
</html>上一篇： 显示 grep 结果的指定行