前端json搜索

news/2024/7/19 13:23:24 标签: js, javascript, jquery

json_2">前端json搜索,无需连接后端:

  // index  输入的字段
  // save_search_result 搜索的全部json数组
  function  indexSelect(index, save_search_result) {
     
   let arr = save_search_result;

   // 前端json搜索
   // 输入内容为空 显示所有的内容
    if (index == '' || index == null) {
      arr = eval(arr); //json是你的json变量名
     var html = '';
     arr.forEach(function (item, index) {
      html += `<li class="" value="${item.userId}" data-index="${index}"  data-name="${item.name}" title="${item.name}" >${item.name}</li>`;
     })

     _list_ul.html(html)

    } else {
      let newJson = [];
      arr = eval(arr);
      var html = '';
      for (var i = 0; i < save_search_result.length; i++) {
        if ((save_search_result[i].name).indexOf(index) > -1) { //name为你需要遍历的变量
          // 搜索到的内容
          var tempJson = { //一下id和name是json中需要输出的变量
            pic: arr[i].pic,
            name: arr[i].name
          };
          newJson.push(tempJson);
        }
      }
     // 搜索到的内容长度为0,则是没有搜索到
     // 搜索到的内容长度不为0,则是搜索到了内容
      if(newJson.length == 0){
        html = '<li id="search_no_result_lm">没有任何相关信息</li>'
      }else{
        newJson.forEach(function (item, index) {
          html += `<li class="" value="${item.userId}" data-index="${index}"  data-name="${item.name}" title="${item.name}" >${item.name}</li>`;
         })
      }
       _list_ul.html(html)
    }
  }

http://www.niftyadmin.cn/n/1263723.html

相关文章

H5唤起应用商店或者应用市场

常用APP URL Scheme 常用app App Store&#xff1a; scheme: itms-apps:// 支付宝&#xff1a; packageName: com.eg.android.AlipayGphone, scheme: alipay://淘宝&#xff1a; packageName: com.taobao.taobao, scheme: taobao:// QQ&#xff1a; packageName: com.t…

elementUI表单验证的怪异问题-填入符合要求的数据校验不通过

一、现象 select选中选项后&#xff0c;提交表单&#xff0c;校验未通过 input填入符合要求的内容后&#xff0c;提交表单&#xff0c;校验未通过 二、代码 两个问题都是由于数据格式不匹配校验未通过&#xff0c;在select中&#xff0c;可以强制将option的value改为string类型…

前端性能优化之Yahoo军规

一、减少HTTP请求数 合并图片合并JavaScript合并CSS 二、使用内容分发网络&#xff08;CDN&#xff09; 三、添加Expire/Cache-Control头 expire存储一个时间值&#xff0c;即过期时间&#xff0c;若没超过过期时间&#xff0c;则继续使用本资源&#xff0c;不发送HTTP请求c…

编写 WebSocket 客户端应用

编写 WebSocket 客户端应用 WebSocket 客户端应用程序使用 WebSocket API 通过 WebSocket 协议与 WebSocket 服务器通信。 一、react 示例如下 // 消息监听const webSocketInit () > {const socket new WebSocket(ws://www.example.com/socketserver) // 连接地址// 打开…

Vue路由参数变化,页面不刷新

一、现象 下面两个页面的截图&#xff0c;URL参数不一样&#xff0c;页面切换时&#xff0c;内容却没有刷新。 二、解决方案 监听路由变化&#xff0c;控制app的刷新

前端性能优化之实战

一、图片优化方法 1、使用css效果及动画替代图片 2、合理选择图片类型 jpg-适用于颜色丰富的图片&#xff0c;压缩率较高png-可做透明和半透明&#xff0c;体积较大gif-用于较通用的动画&#xff0c;只支持全透明&#xff0c;不支持半透明svg-矢量图&#xff0c;放大不失真 …

图形验证码组件

图形验证码组件 代码如下&#xff08;示例&#xff09;&#xff1a; /**** 原本使用react-captcha-code 这个第三方插件 但是会生成浅色字符验证码** 只针对颜色进行了处理 换成了class的形式** 如还想使用以前的第三方组件 只需在 login组件中 引入方式去掉My 即import …

react项目

1.判断两个数组是否相同 代码如下&#xff08;示例&#xff09;&#xff1a; // 判断两个数组是否相同const isArrEqual (arr1, arr2) > {if (arr1.length arr2.length) {let tmp new Set(arr1.concat(arr2))return tmp.size arr2.length}return false}2.根据id需要去重…