城市搜索——基于zepto.js锚点选择后进行搜索

最新推荐文章于 2022-05-11 08:00:00 发布

ansheng02

最新推荐文章于 2022-05-11 08:00:00 发布

阅读量652

点赞数

分类专栏：前端相关手记 JS 解决BUG 前端HTML效果文章标签：搜索城市切换城市

本文链接：https://blog.youkuaiyun.com/ansheng02/article/details/88549420

版权

前端相关手记同时被 3 个专栏收录

33 篇文章

订阅专栏

解决BUG

19 篇文章

订阅专栏

16 篇文章

订阅专栏

本来不想写这个，想着把zepto.js在了解下，再写，后来想想，可能我会忘，还是做个记录吧。

基于zepto.js的字母锚点定位到城市是从网上下载的资源，出于项目需要，新增了城市搜索功能。

具体的实现如下图：

以上是样式，样式的代码很简单，暂且压下不提，主要来谈下在这个城市列表页面进行输入某个字，检索符合的城市名。

思路：

①：定义一个数组（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"
        });
      }
    }
  });