Home > Developer > Web Develop
In the project, sometimes needs the user to select the city, but the city is too many, the user chooses is not very convenient, therefore provides a user can enter the city's Chinese character or the pinyin abbreviation through the input box. The results are as follows:
When you enter pinyin, the results are as follows:
The implementation code is as follows:
<html><head><title>Real-time query city by name or pinyin shorthand</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="Chinese/Pinyin First letter" /> <ul> <li pinyin="BJ" cityname= "Beijing"><a href="http://localhost:8080/test/cityBranch/12.html">Beijing</a></li> <li pinyin="DL" cityname="Dalian"><a href="http://localhost:8080/test/cityBranch/14.html">Dalian</a></li> <li pinyin="sh" cityname="Shanghai"><a href="http://localhost:8080/test/cityBranch/13.html">Shanghai</a></li> <li pinyin="Jn" cityname="Jinan"><a href="http://localhost:8080/test/cityBranch/15.html">Jinan</a></li> <li pinyin="GZ" cityname="guangzhou"><a href="http://localhost:8080/test/cityBranch/17.html">Guangzhou</a></li> <li pinyin="JH" cityname= "Jinhua"><a href="http://localhost:8080/test/cityBranch/18.html">Jinhua</a></li> <li pinyin="WH" cityname="Wuhan"><a href="http://localhost:8080/test/cityBranch/19.html">Wuhan</a></li> <li pinyin="NJ" cityname="nanjing"><a href="http://localhost:8080/test/cityBranch/20.html">Nanjing</a></li> <li pinyin="sz" cityname="Shenzhen"><a href="http://localhost:8080/test/cityBranch/22.html">Shenzhen</a></li> <li pinyin="TJ" cityname="Tianjin"><a href="http://localhost:8080/test/cityBranch/21.html">Tianjin</a></li> <li pinyin="CD" cityname="Chengdu"><a href="http://localhost:8080/test/cityBranch/24.html">Chengdu</a></li> <li pinyin="ly" cityname="Linyi"><a href="http://localhost:8080/test/cityBranch/25.html">Linyi</a></li> <li pinyin="CC" cityname="Changchun"><a href="http://localhost:8080/test/cityBranch/26.html">Changchun</a></li> <li pinyin="Hz" cityname="Hangzhou"><a href="http://localhost:8080/test/cityBranch/27.html">Hangzhou</a></li> <li pinyin="NB" cityname="Ningbo"><a href="http://localhost:8080/test/cityBranch/28.html">Ningbo</a></li> <li pinyin="QD" cityname="Qingdao"><a href="http://localhost:8080/test/cityBranch/29.html">Qingdao</a></li> <li pinyin="sy" cityname="Shenyang"><a href="http://localhost:8080/test/cityBranch/33.html">Shenyang</a></li> </ul> <script> function searchcity() { varSearchcityname = $ ("#searchCityName"). Val ();if(Searchcityname = ="") { $("ul Li"). Show (); }Else{ $("ul Li"). each ( function() { varPinyin = $ ( This). attr ("Pinyin");varCityName = $ ( This). attr ("CityName");if(Pinyin.indexof (searchcityname)! =-1|| Cityname.indexof (searchcityname)! =-1) { $( This). Show (); }Else{ $( This). Hide (); } }); } } $(' #searchCityName '). Bind (' Input PropertyChange ', function() {Searchcity (); });</script></body></html>The project is as follows: http://download.csdn.net/download/zl544434558/9198539
Another reminder of the pits encountered:
1, when I want to implement in the input box real-time query list values, think of the first scenario is to use Ajax, but think about the value of the discovery list is basically fixed, why not once loaded out, so the background code changed a bit, all the city details loaded out.
2, the input box value changes need to trigger events, my first idea is to use onchange, but in fact onchange is the input box value changes and the input box loses focus, so I finally used the KeyUp. KeyUp test on the computer is no problem, but at the end, how does not take effect. The KeyUp is then replaced with the final bind (' Input PropertyChange ', function () {}.
3, in determining whether the city character contains the characters in the input box, I use the CONTAINS function, under the Firefox test without any problems, but in chrome and the client does not take effect. Finally, contains is replaced with IndexOf.
jquery finds list values in real time via the input box
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
