前端页面常见场景实现

最新推荐文章于 2024-10-16 12:59:43 发布

bigFace2019

最新推荐文章于 2024-10-16 12:59:43 发布

阅读量609

点赞数 1

本文链接：https://blog.csdn.net/Handsome2013/article/details/115097091

版权

1.搜索结果高亮显示：

方式1：用高亮字段splite整段字符串，然后拼接的时候换做添加了样式的一段html，最后使用innerHtml放到页面上去。

方式2：使用正则表达式，将匹配正则的部分换做一段带有样式的html，

 changeColor (resultsList) {
      resultsList.map((item, index) => {
        // console.log('item', item)
        if (this.keyWords && this.keyWords.length > 0) {
          // 匹配关键字正则
          let replaceReg = new RegExp(this.keyWords, 'g')
          // 高亮替换v-html值
          let replaceString =
            '<span class="search-text">' + this.keyWords + '</span>'
          resultsList[index].name = item.name.replace(
            replaceReg,
            replaceString
          )
        }
      })
      this.results = []
      this.results = resultsList
}

2.输入用户名显示历史输入

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>

</body>
</html>