JS-文本域多行搜索

文本域多行搜索

在项目中我们经常会遇到输入框中支持多个值搜索的功能。简单的做法可以让用户输入一串字符后手动输入分号(英文的分号字符)，然后我们在js代码中获取到字符后，用string.split(";")分割字符传递给后台搜索；但也可实现换行输入的，一行表示一个搜索条件。我们这里使用文本域组件实现这个需求

文本域组件

以element-ui组件为例 input type='textarea' 组件

<el-input type="textarea" v-model='name'>

匹配换行符

当我们拿到name变量后，我们需要把数据匹配成规定的字符格式传递给接口。

这里说下后台实现的SQL语句：

SELECT *  FROM  t_user WHERE name REGEXP {#name}

其中SQL 语句中 regexp函数(在mysql/oracle中是用来执行正则表达式的一个函数)，所以前端这边给后台的格式可以是：

aaaaa|bbbbb|cccc|ddddd

这种以"|"符号连接的字符串，就可以实现多个字符搜索的功能

this.name = this.name.replace(/\r\n/g, '|');     // IE9, FF, Chrome 
this.name = this.name.replace(/\n/g, '|');　　  // IE 7-8
this.name = this.name.replace(/\s/g, '');　　  // 输入的字符中包含空格
this.name = this.name.replace(/^\|+/g, '|');   // 字符是以多个空行开始
this.name = this.name.replace(/\|+/g, '');       // 字符中间存在多个空行
this.name = this.name.replace(/\|+$/g, '');     // 字符结尾存在多个空行