关于前端:CSS-实现搜索相关交互

先来看一个很常见的搜寻框的交互，大略逻辑如下

1. 当输入框有内容才显示革除按钮
2. 点击革除按钮输入框会清空
3. 当输入框有内容并且处于聚焦状况下才显示搜寻后果浮层
4. 点击搜寻条目后敞开整个搜寻后果浮层

示意如下

看着逻辑如同很多的样子，其实也是能够纯 CSS 实现的，花两三分钟一起看看吧

一、输入框革除按钮的交互

首先来看原生的实现形式。

1. HTML5 新增表单元素

在 HTML5 中新增了 type=search 的表单，如下

<input class="input" type="search" placeholder="请输出关键词">

人造就反对革除性能

而后只须要丑化一下默认的革除按钮就能够了，chrome 中能够应用::-webkit-search-cancel-button，ie 中能够应用::ms-clear，这里以 chrome 为例

[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    width: 36px;
    height: 36px;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'viewBox='0 0 512 512'%3E %3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat;
    background-size: 16px;
    cursor: pointer;
    opacity: .4;
    transition: .2s;
}

这样就能够了

2. firefox 下的实现

不过呢，下面这种形式在 firefox 中是有效的，firefox 中并没有革除按钮，体现和一般输入框统一（下图为 firefox 体现）

如果是 PC 端并且面向用户，firefox 还是不能疏忽的，那如何解决呢？

能够先手动增加一个按钮

<input class="input" type="search" placeholder="请输出关键词">
<button class="clear"></button>

而后适当丑化一下（置信不是什么难事），能够失去这样的成果

当初革除按钮和输入框没啥关联，如何做到有输出内容时才显示革除按钮呢？

能够这样来思考：有内容示意非空，示意必填项，提到必填项能够想到 required 属性，当有内容时，示意非法的，能够匹配 :valid 选择器，这样就能辨别开来了。具体实现如下

给 input加一个 required 属性

<input class="input" placeholder="请输出关键词" required>
<button class="clear"></button>

而后默认暗藏革除按钮，配合相邻选择器 + 就能够实现啦~

.clear{visibility: hidden;}
.input:valid+.clear{visibility: visible;}

成果如下（下图为 firefox 体现）

而后是革除输入框的性能，如果不借助 JS，有什么方法能够清空输入框呢？

在 HTML5 表单中，能够通过 type=reset间接重置所有内容，所以这里须要批改一下构造，将外层 div改为 form，而后给button 增加 type=reset 属性，如下

<form class="search">
    <input class="input" placeholder="请输出关键词">
      <button class="clear" type="reset"></button>
</form>

这样就能清空搜索框了（下图为 firefox 体现），当然其余浏览器也是反对的

这种形式略有遗憾的中央是革除当前输入框没能聚焦

二、搜寻提醒浮层主动显示

先加上搜寻提醒的 HTML 构造

<div class="search">
  <input class="input" placeholder="请输出关键词" />
  <div class="search-list">
        <a class="search-item"> 搜寻后果 1 </a>
        <a class="search-item"> 搜寻后果 2 </a>
        <a class="search-item"> 搜寻后果 3 </a>
    </div>
</div>

搜寻后果默认是暗藏的，而后在输入框有内容（:valid），并且在聚焦状况下（:focus）才显示，配合兄弟选择器 ~ 能够实现如下：

.search-list{
      position: absolute;
    visibility: hidden;
}
.input:focus:valid~.search-list{visibility: visible;}

成果如下

三、搜寻提醒浮层上的事件

下面的成果看着如同没啥问题，点击搜寻条目后整个搜寻后果的确敞开了。

但其实只有是有问题的，点击敞开是因为输入框失去了焦点，如果在搜寻条目上增加点击事件，有可能还没触发事件就敞开了，比方

<form class="search">
    <input class="input" placeholder="请输出关键词">
    <div class="search-list">
        <a class="search-item" onclick="console.log(1)"> 搜寻后果 1 </a>
        <a class="search-item"> 搜寻后果 2 </a>
        <a class="search-item"> 搜寻后果 3 </a>
    </div>
</form>

成果如下，在点击的时候并没有触发 click 事件（控制台没有打印）

起因其实很简略，click 其实能够看成是 mousedown → mouseup，在 mousedown 后立即失焦，还没等 mouseup 就敞开提醒悬浮层了，所以事件并未触发。

为了解决这个问题，能够把 onclick换成 onmousedown，然而这样显然没有从基本解决，比方很多时候搜寻条目上是href 属性

<div class="search-list">
   <a class="search-item" href="?id=1"> 搜寻后果 1 </a>
</div>

这样也无奈正确的跳转。

那如何解决呢？

这里有一个非常简单的小技巧，在点击的时候强制显示不就能够了吗？点击能够用 :active 来匹配，所以能够这样来实现：

.input:focus:valid~.search-list,
.search-list:active{ /* 点击的时候也显示 */
    visibility: visible;
}

这样就能失常的触发点击和跳转事件了（控制台有打印）

残缺代码能够拜访 CSS search (codepen.io)

兼容 firefox 的残缺代码能够拜访 CSS search firefox (codepen.io)

四、总结和阐明

以上实现了一个搜寻输出相干的交互成果，没有布局方面的技巧，外围在于选择器的正当应用，上面总结一下实现重点：

1. 输入框能够应用 HTML5 新增的 type=search属性，人造反对革除性能，惋惜 firefox 不反对
2. 输入框设置 requred 属性后联合 :valid 选择器能够判断是否有内容
3. 在 form 表单里能够通过 type=reset 的 button 重置输出的内容
4. 点击生效的起因是输入框先于点击事件失焦，能够用 :active来匹配点击相干行为
5. 各种选择器联合应用能够实现更加灵便的交互成果
6. 兼容性 IE 10+，简直能够生产环境应用

应用 CSS 实现交互的益处是容错率更高，不会导致网站解体，性能也更好，很多时候 js 呈现谬误导致整个网站间接白屏，齐全不可用，CSS 就不存在这样的问题啦~ 如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤