精华内容
下载资源
问答
  • 前端模糊查询怎么实现
    2022-06-30 15:24:22

    项目场景:

    模糊查询一般是后端会有接口,但是前端也可以做模糊查询,当数据全部返回,没有分页的时候前端可以做模糊查询,减少服务器压力

    方法:

    思路:

    • 列表为数组对象,使用filter过滤返回 item.dataName.indexOf(this.searchVal) !== -1的数据,dataName:要查询的字段,searchVal搜索值,当item.dataName中包含searchVal值时会返回index索引,没有时返回-1,showDataList 则为【】,searchVal为空值时,则返回0,showDataList 则为list列表值
    • 注意:
      任何字符串indexOf(' ') 返回都是0,数组indexOf(' ')返回都是-1
      eg:
          '你好'.indexOf(' ') // 0
          ['1','2','3'].indexOf(' ') // -1
    <!-- 搜索栏 -->
    <div class="search-input">
        <Input v-model="searchVal" placeholder="搜索"></Input>
        <Icon class="icon" type="ios-search" />
    </div>
    <!-- 列表 -->
    <ul class="list-box">
        <li class="list-item" v-for="item in showDataList" :key="item.dataId">
        <Icon class="item-icon-left" type="logo-buffer" size="20" />
        <span class="list-item-name" :title="item.dataName">{{ item.dataName}}</span>
        </li>
    </ul>
    
    export default {
        data () {
            return {
                searchVal: '',
                list:[]
            }
        },
        computed: {
            showDataList () {
                const filterList = (this.list && this.list.length) ? this.list.filter(item => {
                    return item.dataName.indexOf(this.searchVal) !== -1 // 这里是根据dataName进行模糊查询
                }) : []
            
                 return filterList
            }
        },
        methods: {
          async getList () {
            const res= await queryScreenList()
            this.list = res.data
          }
        }
    }
    
    更多相关内容
  • Jeecg-boot生成代码功能如下: 日期:2020年02月28日 想实现在姓名输入框只输入“张”,点击查询,能查询出 ...还有你需要设置模糊查询的输入框位置 注释的是原有的,下面的一行是新加入的 全存代码,重新编译运行
  • 1、仅仅通过js实现前端进行模糊查询。 2、对数据按照设定条数进行分割,然后分批加载,避免数据过多时dom加载慢或者卡死的出现。
  • 本文件属于文章《前端实现js模糊查询关键字显示下拉框功能的实例教程》的完整代码,在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在开发中直接使用。
  • 前端Js实现模糊查询

    2022-07-14 11:44:32
    前端Js实现字符串的模糊查询

    使用match方法对字符串模糊查询

    需要查询的原有数据:

    data1: [
            {
              key: 1,
              name: '第一'
            },
            {
              key: 2,
              name: 'ssss'
            },
            {
              key: 3,
              name: '12121'
            },
            {
              key: 4,
              name: '####'
            },
            {
              key: 5,
              name: '!!**'
            }

    查询数据

     查询之后返回的数据

    直接上代码:

     hhh() {
          console.log(this.data2)
          var reg = new RegExp(this.title, 'i')
          const arr = []
          this.data1.forEach((item) => {
            if (item.name.match(reg) !== null) {
              arr.push(item)
            }
          })
          this.data2 = arr
          const deWeightThree = () => {
            const map = new Map()
            for (const item of this.data2) {
              if (!map.has(item.key)) {
                map.set(item.key, item)
              }
            }
            return [...map.values()]
          }
          this.data2 = deWeightThree()
          console.log(this.data2)

     

    详细学习地址:

    JavaScript match() 方法 | 菜鸟教程

    展开全文
  • vue前端实现模糊查询

    2021-12-21 11:34:13
    <div class="blacklistPage"> <van-search v-model="searchValue" placeholder="请搜索游戏名" /> <div class="gameList"> <div class="gamelist-item" v-for="(item,index) in list" :key=...
    <div class="blacklistPage">
        <van-search v-model="searchValue" placeholder="请搜索游戏名" />
        <div class="gameList">
          <div class="gamelist-item" v-for="(item,index) in list" :key="index">
            <div class="item-left">
              <div><img :src=item.imgSrc alt="" class="imgDesign"></div>
              <div>
                <div class="designName">{{item.name}}</div>
                <div class="designType">{{item.type}}</div>
              </div>
            </div>
            <div class="item-right">移除</div>
          </div>
        </div>
        <div class="noPerson" v-show="noSearch">
          <img :src="NOsrc" alt="">
          <div style="text-align:center;color: #5480E5;font-size: 12px;line-height: 17px;">搜索结果为空~</div>
        </div>
      </div>
    

    模拟数据:

      searchValue: "",
          src: require(".././../assets/img/user.png"),
          NOsrc: require("../../assets/img/noresult.png"),
          noSearch: false,
          gameNameList: [
            {
              name: "拳皇2021",
              imgSrc: require(".././../assets/img/user.png"),
              type: "格斗",
            },
            {
              name: "逆战",
              imgSrc: require(".././../assets/img/user.png"),
              type: "格斗",
            },
            {
              name: "QQ飞车",
              imgSrc: require(".././../assets/img/user.png"),
              type: "格斗",
            },
            {
              name: "剑灵",
              imgSrc: require(".././../assets/img/user.png"),
              type: "格斗",
            },
            {
              name: "原神",
              imgSrc: require(".././../assets/img/user.png"),
              type: "格斗",
            },
            {
              name: "QQ炫舞",
              imgSrc: require(".././../assets/img/user.png"),
              type: "格斗",
            },
            {
              name: "我的世界",
              imgSrc: require(".././../assets/img/user.png"),
              type: "格斗",
            },
            {
              name: "消消乐",
              imgSrc: require(".././../assets/img/user.png"),
              type: "格斗",
            },
            {
              name: "捕鱼达人",
              imgSrc: require(".././../assets/img/user.png"),
              type: "格斗",
            },
          ],
    

    利用计算属性:

      computed: {
        list: function () {
          //逻辑-->根据input的value值筛选resultList中的数据
          var arrByZM = []; //声明一个空数组来存放数据
          for (var i = 0; i < this.gameNameList.length; i++) {
            //for循环数据中的每一项(根据name值)
            if (this.gameNameList[i].name.search(this.searchValue) != -1) {
              //判断输入框中的值是否可以匹配到数据,如果匹配成功
              arrByZM.push(this.gameNameList[i]);
              //向空数组中添加数据
            }
          }
          this.noSearch = arrByZM.length == 0 ? true : false;
          return arrByZM;
        },
      },
    
    展开全文
  • 前端实现模糊查询

    2021-09-11 16:21:48
    前端实现关键字模糊查询记录 test方法 代码展示: const reg = new RegExp(关键字); //输入关键字 const data=['steven','mike','alice'] for (let index = 0; index < data.length; index++) { if (reg.test...

    前端实现关键字模糊查询记录

    test方法

    代码展示:

      const reg = new RegExp(关键字);  //输入关键字
      const data=['steven','mike','alice']
      for (let index = 0; index < data.length; index++) {
           if (reg.test(data[index])) {
            return data[index] //返回满足条件的数据
            }
    

    IndexOf()方法的记录

    注释:indexOf() 方法对大小写敏感!

    注释:如果要检索的字符串值没有出现,则该方法返回 -1。

    示例:

    var str=["Hello"," world", "welcome", "to", "the universe"];
    var key='world';
    var arr=[]
    for (let index = 0; index < str.length; index++) {
         if (str[index].indexOf(key)>=0) {
          arr.push(str[index]);//返回满足条件的数据
         }}
    
    展开全文
  • 效果图 代码 html <el-table :data="tableData" stripe style="width: 100%; margin-bottom: 30px" size="mini" height="480px" ...el-table-column prop="date" label="日期" min-width="180">... &
  • 本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或...
  • vue教程——13vue+elementUI组件table实现前端分页功能+前端模糊查询功能一 elementUI组件table实现前端分页功能二 前端模糊查询功能 一 elementUI组件table实现前端分页功能 <template> <div> <el...
  • 前端 实现模糊查询和精准查询

    千次阅读 2021-01-14 10:55:39
    前端 实现模糊查询和精准查询 一、模糊查询 let i=0; let arr = [ { name: `汪印星`, age: 24, sex: `男`, xuehao: i++ }, { name: `李演峰`, age: 22, sex: `女`, xuehao: i++ }, { name: `廖家威`, age: 23, ...
  • JS 前端实现模糊查询

    2021-01-07 19:39:08
    这里写自定义目录标题前端实现模糊查询 前端实现模糊查询 filter()与match() const resultArray= allDataList.filter(item=> item.name.match(searchKey));
  • 下面小编就为大家带来一篇在java List中进行模糊查询实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 实现目标:在输入框中输入与名称有关的内容,出现与所输入内容有关的表信息。 实现效果: 实现方式: template中: <div class="search-box"> <el-input placeholder="请输入名称" v-model=...
  • 1. for if 精准查询 2. 正则 模糊查询
  • 如果你需要在前端实现模糊查询,且包括对时间数据进行模糊查询 在vue中实现方式,请查询下面的代码;其他语言,可以参考实现思路 <script> export default { data() { newList: [], list: [ { name:'...
  • //表格数据 ... //查询条件 form: { name: "", phone: "", }, //新数组 tableList: [], search() { let arr = this.table_data; Object.keys(this.form).forEach((e) => { arr = this...
  • 前端实现模糊搜索

    2022-07-19 15:40:34
    前端实现模糊搜索
  • 前台select框模糊查询方法 可以实现多选以及模糊匹配 可以调高查找效率
  • ssm框架实现模糊查询

    2017-08-05 08:58:19
    ssm框架实现模糊查询
  • 前端实现树结构模糊查询 fliterTree(searchObj, list) { const searchData = (searchObj, arr) => { if (!Array.isArray(arr) || arr.length === 0) { return [] } let newarr = [] arr.forEach(item =>...
  • tempDate:该变量用来保存在后台请求过来的所有数据,便于模糊查询时进行匹配。 2.computed和watch方法 watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来。当Vue视图中的数据变化时, 关联的函数...
  • js 前端实现模糊搜索

    2022-08-11 18:26:07
    代码】js 前端实现模糊搜索。
  • 在实际开发中,部分模糊查询可由前端实现,以下介绍下拉框和树节点场景 第一步:安装pinyin-match npm install pinyin-match --save 第二步:封装成公共方法 const PinyinMatch = require('pinyin-match/dist/...
  • js前端实现模糊查询

    2017-07-31 20:21:00
    //字符串方法indexOf var len = list.length; var arr = []; for(var i=0;i<len;i++){ //如果字符串中不包含目标字符会返回-1 if(list[i].indexOf(keyWord)>=0){ arr.push(list[i]);......
  • “搜索”可以使我们更快的找到某一个关键词或者某一个商品,所以“模糊查询”和“下拉匹配”也成了前端必备的一个小技能,开门见山,希望对朋友们有帮助。 —搜索框模糊查询带下拉匹配效果html— <!------------...
  • 前端实现模糊搜索功能

    千次阅读 2022-06-08 11:06:10
    最近在项目中遇到的业务需求,页面创建时把所有数据都加载了,这种情况下,使用后端SQL语句进行模糊,有点浪费时间,决定使用前端的输入框 + 按钮实现对数据的模糊搜索 三、实现代码 四、实现效果...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,248
精华内容 15,299
热门标签
关键字:

前端模糊查询怎么实现