基于jQuery实现搜索关键字自动匹配功能
56 浏览量
2020-11-22
22:24:12
上传
评论 1
收藏 156KB PDF 举报
基于基于jQuery实现搜索关键字自动匹配功能实现搜索关键字自动匹配功能
今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子，希望文章能够对各位有帮助。
例子一例子一
在项目中，有时候需要用户选择城市，但是城市太多，用户选择起来不太方便，所以提供了一个用户可以通过输入框输入城市
的汉字或者拼音简写。结果示意图如下：
当输入拼音后结果示意图如下：
实现代码如下：
<html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "utf-8" ><script type="text/javascript" src="jquery.min.js"></script>
<body><input id="searchCityName" style="width: 100%;" type="text" placeholder="中文 / 拼音首字母" />
<ul>
<li pinyin="bj" cityname="北京"><a href="/cityBranch/12.html">北京 </a></li>
<li pinyin="dl" cityname="大连"><a href="/cityBranch/14.html">大连 </a></li>
<li pinyin="sh" cityname="上海"><a href="/cityBranch/13.html">上海 </a></li>
<li pinyin="jn" cityname="济南"><a href="/cityBranch/15.html">济南 </a></li>
<li pinyin="gz" cityname="广州"><a href="/cityBranch/17.html">广州 </a></li>
<li pinyin="jh" cityname="金华"><a href="/cityBranch/18.html">金华 </a></li>
<li pinyin="wh" cityname="武汉"><a href="/cityBranch/19.html">武汉 </a></li>
<li pinyin="nj" cityname="南京"><a href="/cityBranch/20.html">南京 </a></li>
<li pinyin="sz" cityname="深圳"><a href="/cityBranch/22.html">深圳 </a></li>
<li pinyin="tj" cityname="天津"><a href="/cityBranch/21.html">天津 </a></li>
<li pinyin="cd" cityname="成都"><a href="/cityBranch/24.html">成都 </a></li>
<li pinyin="ly" cityname="临沂"><a href="/cityBranch/25.html">临沂 </a></li>
<li pinyin="cc" cityname="长春"><a href="/cityBranch/26.html">长春 </a></li>
<li pinyin="hz" cityname="杭州"><a href="/cityBranch/27.html">杭州 </a></li>
<li pinyin="nb" cityname="宁波"><a href="/cityBranch/28.html">宁波 </a></li>
<li pinyin="qd" cityname="青岛"><a href="/cityBranch/29.html">青岛 </a></li>
<li pinyin="sy" cityname="沈阳"><a href="/cityBranch/33.html">沈阳 </a></li>
</ul>
<script>
function searchCity() {
var searchCityName = $("#searchCityName").val(); if (searchCityName == "") {
资源评论
