本來不想寫這個(gè)，想著把zepto.js在了解下，再寫，后來想想，可能我會(huì)忘，還是做個(gè)記錄吧。
基于zepto.js的字母錨點(diǎn)定位到城市是從網(wǎng)上下載的資源，出于項(xiàng)目需要，新增了城市搜索功能。
具體的實(shí)現(xiàn)如下圖：
以上是樣式，樣式的代碼很簡(jiǎn)單，暫且壓下不提，主要來談下在這個(gè)城市列表頁(yè)面進(jìn)行輸入某個(gè)字，檢索符合的城市名。
思路：
①：定義一個(gè)數(shù)組（var arr = [];）
②：監(jiān)測(cè)input框輸入事件（jQuery->input的標(biāo)簽名 + .bind('input propertychange', function() { });）
③：遍歷城市列表的標(biāo)簽內(nèi)容（jQuery->each）
④：判斷input框的輸入值是否為空，并且檢索這個(gè)輸入值和城市列表中的值是否有相等的
? ? ?（input.val() != "" && $(this).text().indexOf(input.val()) != -1）
⑤：將符合搜索結(jié)果的值添加到arr中（jQuery->arr.appen();）
⑥：判斷arr.length是否等于0（if ( arr.length != 0 ){…………}）
⑦：如果不等于0，for循環(huán)arr，將每一個(gè)循環(huán)到的值放入到ul中
（for(var i = 0 ; i< arr.length;i++){ $ul.append("<li class='city-lis'>" + arr[i] + "</li>");? }）
⑧：如果等于0，移除掉所有l(wèi)i標(biāo)簽（li.remove();）
⑨：點(diǎn)擊li標(biāo)簽，獲取當(dāng)前l(fā)i標(biāo)簽的值（$(ul).on('click','li',function(){ alert( $(this).html ) })）
⑩：給當(dāng)前的li標(biāo)簽添加樣式--點(diǎn)擊當(dāng)前l(fā)i添加樣式，點(diǎn)擊下一個(gè)li消除當(dāng)前l(fā)i標(biāo)簽樣式，給另一個(gè)li添加樣式
（$("ul li[class*='樣式名']").removeClass("樣式名");? $(this).addClass("樣式名");）
以上這些用jquery實(shí)現(xiàn)出我給的圖片示例，完全沒壓力，但是，會(huì)出一個(gè)問題，我暫時(shí)先賣一個(gè)一個(gè)關(guān)子，咱們看下這樣一步步走下來，能實(shí)現(xiàn)到什么地步。
以下是源碼：
<div class="top">
? ? <input id="showCity" class="show-city" type="text" placeholder="請(qǐng)點(diǎn)擊字母導(dǎo)航您所選的城市">
? ? <button id="btnCity" class="btn-select">確定</button>
</div>
<div class="text-city col-xs-11">
? <ul class="center-block"></ul>
</div>
<script src="${base}/resources/common/js/jquery.js"></script>
<script src="${base}/resources/common/js/zepto.js"></script>
<script type="text/javascript">
? $(function () {
? ? var $showCity = $("#showCity");
? ? var $ul = $(".text-city ul");
? ? //獲取P標(biāo)簽的內(nèi)容
? ? //var p_text = $("p").text();
? ? var arr = [];
? ? $showCity.bind('input propertychange', function() {
? ? ? //進(jìn)行相關(guān)操作
? ? ? $("p").each(function(){
? ? ? ? if($showCity.val() != "" && $(this).text().indexOf($showCity.val()) != -1){
? ? ? ? ? arr.push($(this).text());
? ? ? ? }
? ? ? });
? ? ? if(arr.length != 0){
? ? ? ? for(var i = 0 ; i< arr.length;i++){
? ? ? ? ? $ul.append("<li class='city-lis'>" + arr[i] + "</li>");
? ? ? ? }
? ? ? }else if(arr.length == 0){
? ? ? ? $(".text-city ul li").remove();
? ? ? }
? ? });
? //點(diǎn)擊li標(biāo)簽獲取li的值
? ? $(".text-city ul").on('click','li',function(){
? ? ? ? $("#showCity").val($(this).html());
? ? ? ? $(".text-city ul li[class*='li-click']").removeClass("li-click");
? ? ? ? $(this).addClass("li-click");
? ? });
})
</script>
這樣的實(shí)現(xiàn)會(huì)有問題，給大家看下問題截圖：
有沒有發(fā)現(xiàn)“Oh，My God，怎么我刪除了‘安’字，會(huì)出現(xiàn)重復(fù)？？？”
大家有沒有考慮，我們目前所做的操作都是在檢測(cè)到input框有輸入變化進(jìn)行的。?
第一次操作，我們輸入一個(gè)字，把匹配到的結(jié)果放到數(shù)組中；
第二次操作，我們刪除這個(gè)字，同樣是在監(jiān)測(cè)input框的輸入狀態(tài)有變化下進(jìn)行的，但這個(gè)時(shí)候，數(shù)組沒有清空，我們的值會(huì)再次渲染一遍。
解決方案：
$showCity.bind('input propertychange', function() {
? ? ? //進(jìn)行相關(guān)操作? arr.splice(1,1)
? ? ? arr.splice(0,arr.length);? //這一句清空數(shù)組，不管數(shù)組里有沒有值，都清空數(shù)組。
? ? ? $("p").each(function(){
? ? ? ? if($showCity.val() != "" && $(this).text().indexOf($showCity.val()) != -1){
? ? ? ? ? arr.push($(this).text());
? ? ? ? }
? ? ? });
? ? });
加上清空數(shù)組操作?。。∵@句話很重要?。。?！
好了，這樣基本就完成了對(duì)城市列表進(jìn)行搜索操作，完成傳值可以在點(diǎn)擊“確定”button時(shí)添加事件。
記敘（以下是關(guān)于我的廢話）：
本來做切換城市的時(shí)候我就考慮了要不要加上城市搜索，但身為前端開發(fā)人員，我并沒有做過跟搜索相關(guān)的，有點(diǎn)無從下手，便從網(wǎng)上開始找，找來找去都在說要下載漢語包，匹配中文字符時(shí)，要考慮多音字的情況，獲取到漢字unicode碼，有進(jìn)行什么操作，沒有就進(jìn)行什么操作……老實(shí)說，心痛，看到這么復(fù)雜的操作，我慫。
就這樣，先做了字母檢索，關(guān)于搜索還是先冷靜冷靜。
兩天后，經(jīng)理又提起了搜索城市，唉，逃不過逃不過的。
我抱著“孤注一擲”的勇氣找后臺(tái)問，搜索都怎么做額？
“簡(jiǎn)單啊，你就判斷他輸入的值和你下面的值是否相等就行啦~”
“相等？”
“對(duì)呀，jQuery不是有each遍歷嘛，你就遍歷，把遍歷后相等的值放到一個(gè)list里面?！?/p>
“對(duì)呀，哈~這么簡(jiǎn)單……”
于是就有了這一篇，嗯，可以說是我寫博客以來，很盡心的一篇了。
不得不說，很多時(shí)候，換個(gè)思路來也能達(dá)到目的。
畢竟，前端嘛~你的頁(yè)面時(shí)要面向客戶得嘛~
客戶又不看你代碼~~
哈哈哈哈哈哈~~~~
《《《《《-------------------------------------------------------------后續(xù)完善-----------------------------------------------------------------》》》》》
用戶的輸入行為是我們不可控的，如果不做嚴(yán)謹(jǐn)?shù)男ｒ?yàn)操作，用戶的不可控行為將會(huì)給我們的后臺(tái)帶去無限的壓力。所以，嗯，為了你好我好大家好，當(dāng)然，為了商城更好。
所以，和諧為本，我們還是做一個(gè)嚴(yán)謹(jǐn)?shù)男ｒ?yàn)吧。
//情況一：用戶沒有輸入任何值，就點(diǎn)擊了“確定”按鈕
//情況二：用戶輸入的值，不存在當(dāng)前的城市列表中
//情況三：用戶輸入的值，存在于當(dāng)前的城市列表中，但并不完整，比如：用戶輸入“上?！保覀兯阉鞒觥吧虾Ｊ小?/i>
以上這三種情況，都要報(bào)warning。
思路：
①：定義一個(gè)參數(shù)變量：isselect = false；
②：判斷input框是否有值? （針對(duì)情況一）
③：遍歷包含城市名的p標(biāo)簽，判斷p標(biāo)簽的值和輸入的input的值是否完全一致 （針對(duì)情況二和三）
（注：JS中兩個(gè)等號(hào)和三個(gè)等號(hào)并不一樣，三個(gè)等號(hào)是全等。
? ? 舉例："1,2,3"? /? ?123? 這兩個(gè)作比較，如果是兩個(gè)等號(hào)（==），則會(huì)輸出true，如果是三個(gè)等號(hào)（===），則會(huì)輸出false；
? ? ===表示類型也要相等。
輸出"1,2,3",為String，而1,2,3,為Number。
基于此，為保證完全相等，此處用三個(gè)等號(hào)===）
代碼如下：
//點(diǎn)擊確定按鈕
? $("#btnCity").click(function(){
? ? let isselect = false;
? ? if($showCity.val() == ""){
? ? ? $.bootstrapGrowl("請(qǐng)選擇正確的城市", {
? ? ? ? type: "warning"
? ? ? });
? ? }else{
? ? ? $("p").each(function(){
? ? ? ? if( $(this).text() === $showCity.val() ){
? ? ? ? ? isselect = true;
? ? ? ? ? return isselect;
? ? ? ? }
? ? ? });
? ? ? if(isselect){
? ? ? ? alert("true");
? ? ? }else{
? ? ? ? $.bootstrapGrowl("請(qǐng)選擇正確的城市", {
? ? ? ? ? type: "warning"
? ? ? ? });
? ? ? }
? ? }
? });
