本来不想写这个，想着把zepto.js在了解下，再写，后来想想，可能我会忘，还是做个记录吧。
基于zepto.js的字母锚点定位到城市是从网上下载的资源，出于项目需要，新增了城市搜索功能。
具体的实现如下图：
原图（zepto.js）的城市检索
基于业务需求，新增input
输入检索字段
选中某一字段
以上是样式，样式的代码很简单，暂且压下不提，主要来谈下在这个城市列表页面进行输入某个字，检索符合的城市名。
思路：
①：定义一个数组（var arr = [];）
②：监测input框输入事件（jQuery->input的标签名 + .bind('input propertychange', function() { });）
③：遍历城市列表的标签内容（jQuery->each）
④：判断input框的输入值是否为空，并且检索这个输入值和城市列表中的值是否有相等的
（input.val() != "" && $(this).text().indexOf(input.val()) != -1）
⑤：将符合搜索结果的值添加到arr中（jQuery->arr.appen();）
⑥：判断arr.length是否等于0（if ( arr.length != 0 ){…………}）
⑦：如果不等于0，for循环arr，将每一个循环到的值放入到ul中
（for(var i = 0 ; i< arr.length;i++){ $ul.append("<li class='city-lis'>" + arr[i] + "</li>"); }）
⑧：如果等于0，移除掉所有li标签（li.remove();）
⑨：点击li标签，获取当前li标签的值（$(ul).on('click','li',function(){ alert( $(this).html ) })）
⑩：给当前的li标签添加样式--点击当前li添加样式，点击下一个li消除当前li标签样式，给另一个li添加样式
（$("ul li[class*='样式名']").removeClass("样式名"); $(this).addClass("样式名");）
以上这些用jquery实现出我给的图片示例，完全没压力，但是，会出一个问题，我暂时先卖一个一个关子，咱们看下这样一步步走下来，能实现到什么地步。
以下是源码：
<div class="top">
<input id="showCity" class="show-city" type="text" placeholder="请点击字母导航您所选的城市">
<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标签的内容
//var p_text = $("p").text();
var arr = [];
$showCity.bind('input propertychange', function() {
//进行相关操作
$("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();
}
});
//点击li标签获取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>
这样的实现会有问题，给大家看下问题截图：
输入检索字段
输入后，在删除，出现如图所示
有没有发现“Oh，My God，怎么我删除了‘安’字，会出现重复？？？”
大家有没有考虑，我们目前所做的操作都是在检测到input框有输入变化进行的。
第一次操作，我们输入一个字，把匹配到的结果放到数组中；
第二次操作，我们删除这个字，同样是在监测input框的输入状态有变化下进行的，但这个时候，数组没有清空，我们的值会再次渲染一遍。
解决方案：
$showCity.bind('input propertychange', function() {
//进行相关操作 arr.splice(1,1)
arr.splice(0,arr.length); //这一句清空数组，不管数组里有没有值，都清空数组。
$("p").each(function(){
if($showCity.val() != "" && $(this).text().indexOf($showCity.val()) != -1){
arr.push($(this).text());
}
});
});
加上清空数组操作！！！这句话很重要！！！！
好了，这样基本就完成了对城市列表进行搜索操作，完成传值可以在点击“确定”button时添加事件。
记叙（以下是关于我的废话）：
本来做切换城市的时候我就考虑了要不要加上城市搜索，但身为前端开发人员，我并没有做过跟搜索相关的，有点无从下手，便从网上开始找，找来找去都在说要下载汉语包，匹配中文字符时，要考虑多音字的情况，获取到汉字unicode码，有进行什么操作，没有就进行什么操作……老实说，心痛，看到这么复杂的操作，我怂。
就这样，先做了字母检索，关于搜索还是先冷静冷静。
两天后，经理又提起了搜索城市，唉，逃不过逃不过的。
我抱着“孤注一掷”的勇气找后台问，搜索都怎么做额？
“简单啊，你就判断他输入的值和你下面的值是否相等就行啦~”
“相等？”
“对呀，jQuery不是有each遍历嘛，你就遍历，把遍历后相等的值放到一个list里面。”
“对呀，哈~这么简单……”
于是就有了这一篇，嗯，可以说是我写博客以来，很尽心的一篇了。
不得不说，很多时候，换个思路来也能达到目的。
毕竟，前端嘛~你的页面时要面向客户得嘛~
客户又不看你代码~~
哈哈哈哈哈哈~~~~
《《《《《-------------------------------------------------------------后续完善-----------------------------------------------------------------》》》》》
用户的输入行为是我们不可控的，如果不做严谨的校验操作，用户的不可控行为将会给我们的后台带去无限的压力。所以，嗯，为了你好我好大家好，当然，为了商城更好。
所以，和谐为本，我们还是做一个严谨的校验吧。
//情况一：用户没有输入任何值，就点击了“确定”按钮
//情况二：用户输入的值，不存在当前的城市列表中
//情况三：用户输入的值，存在于当前的城市列表中，但并不完整，比如：用户输入“上海”，我们搜索出“上海市”
以上这三种情况，都要报warning。
思路：
①：定义一个参数变量：isselect = false；
②：判断input框是否有值 （针对情况一）
③：遍历包含城市名的p标签，判断p标签的值和输入的input的值是否完全一致 （针对情况二和三）
（注：JS中两个等号和三个等号并不一样，三个等号是全等。
举例："1,2,3" / 123 这两个作比较，如果是两个等号（==），则会输出true，如果是三个等号（===），则会输出false；
===表示类型也要相等。
输出"1,2,3",为String，而1,2,3,为Number。
基于此，为保证完全相等，此处用三个等号===）
代码如下：
//点击确定按钮
$("#btnCity").click(function(){
let isselect = false;
if($showCity.val() == ""){
$.bootstrapGrowl("请选择正确的城市", {
type: "warning"
});
}else{
$("p").each(function(){
if( $(this).text() === $showCity.val() ){
isselect = true;
return isselect;
}
});
if(isselect){
alert("true");
}else{
$.bootstrapGrowl("请选择正确的城市", {
type: "warning"
});
}
}
});
网友评论