代码地址如下:
http://www.demodashi.com/demo/14249.html

一、前期准备工作

软件环境:微信开发者工具

官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。
  • 实现搜索关键词高亮
2、案例目录结构

二、程序实现具体步骤

1.index.wxml代码
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">
{{userInfo.nickName}}\n
点击头像开始搜索
</text>
</view>
</view>
2.index.wxss代码
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
} .userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
} .userinfo-nickname {
color: red;
text-align: center;
} .usermotto {
margin-top: 200px;
}
3.search.wxml代码

<!--search.wxml-->
<view>
<view>您输入的关键词:{{inputs}}</view>
<view class="input-wrap">
<input bindinput="bindSearchInput" placeholder="点击此处开始输入...." value="极客小寨" class="search-input" auto-focus/>
<button bindtap="bindSearchTap" class="search-button">搜索</button>
</view>
<view class="search-result-list">
<block wx:for="{{result}}" wx:for-index="idx" wx:for-item="key_item" wx:key="">
<view data-idx="{{idx}}" class="list-item">
<block wx:for="{{key_item}}" wx:for-item="key_obj" wx:key="">
<text wx:if="{{key_obj.key == true}}" style="color:red;">{{key_obj.str}}</text>
<text wx:else>{{key_obj.str}}</text>
</block>
</view>
</block>
</view>
</view>
4.弹框index.js逻辑代码

a.部分的功能实现

search_databse: function () {
let hilight_word = function (key, word) {
let idx = word.indexOf(key);
let t = [];
if (idx > -1) {
if (idx == 0) {
t = hilight_word(key, word.substr(key.length));
t.unshift({key:true,str:key});
return t;
}
if (idx > 0) {
t = hilight_word(key, word.substr(idx));
t.unshift({key:false,str:word.substring(0, idx)});
return t;
}
}
return [{key:false,str:word}];
}; let database= [
'极客小寨小程序开发_百度百科',
'极客小寨微信小程序正式上线',
'极客小寨微信小程序有哪些?关注极客小寨微信公众号获取微信小程序最全汇总?',
'公众号出售-公众号价格-公众号买卖-A5公众号交易平台',
'如何运营出一个有吸引力的微信公众号? - 微信公众平台号 - 知乎'
];
let searched = [];
let inputs = this.data.inputs;
for (let i = 0; i < database.length; i++) {
var current_word = database[i];
if (current_word.indexOf(inputs) > -1) {
searched.push(hilight_word(inputs, current_word))
}
}
// console.log(searched);
this.data.result=searched;
console.log('this data',this.data);
this.setData(this.data);
},

三、案例运行效果图

四、总结与备注

暂无微信小程序--搜索关键词高亮

代码地址如下:
http://www.demodashi.com/demo/14249.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

微信小程序--搜索关键词高亮的更多相关文章

  1. 微信小程序搜索并高亮关键字

    更多解读可使用博客: https://www.jianshu.com/p/86d73745e01c 实现流程:1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表key ...

  2. 微信小程序 —搜索框

    wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // ...

  3. 微信小程序----搜索框input回车搜索事件

    在微信小程序里的搜索框,按软键盘回车键触发搜索事件. <input type="text"  placeholder="搜索" value="{ ...

  4. Vscode插件--微信小程序格式化以及高亮组件wxml-vscode

    wxml-vscode wxml-vscode 仓库 提问题 安装 通过 F1 或者 CMD + Shift + P 输入 install. 选择: Install Extension. 特性 格式化 ...

  5. 微信小程序搜索框代码组件

    search.wxml <view class="header"> <view class="search"> <icon typ ...

  6. Hbuilder 开发微信小程序的代码高亮

    一.点击“工具”-“选项”-搜索“文件关联” 二.点击“添加”文件类型,点击确定 三.在相关联的编辑器中点击“添加”按钮,选择CSS Editor,点击确定,重新打开 *.wxss 类型的文件即可 其 ...

  7. 两天快速开发一个自己的微信小程序

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Songti SC" } p.p2 { margin: 0.0px 0. ...

  8. 小程序开发运营必看:微信小程序平台运营规范

    一.原则及相关说明 ​ 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. ​ 微信团队一 ...

  9. 业余时间折腾了个微信小程序版本的街机游戏模拟器(吾爱街机),8090后的童年回忆,欢迎大家体验

    好多年没来博客园了,有段时间想玩街机游戏,发现都需要下载安装,现在小程序这么流行,是不是可以集成到小程序里(无需下载,在线玩),出于这想法,就业余时间折腾了下,分享给大家,偶尔可以回味畅玩下. 中间遇 ...

随机推荐

  1. Win8 下配置Java开发环境

    背景: 大学期间学习过一段时间的JavaEE.不算很熟悉. 后来学习并在工作中很多其它是iOS开发,iOS的水平属于中上. 对技术已经有一定熟知程度. 近期为了写一些东西,须要用到Java写后台. 流 ...

  2. 操作系统Day1地址空间与地址生成

    1.地址空间分成(1)物理地址空间 (2)逻辑地址空间二者之间的关系:*逻辑地址空间的生成:程序——>汇编-->linker——>loader*物理地址的生成:内存的逻辑地址空间会有 ...

  3. python里的引用、浅拷贝、深拷贝

    参考: 1.http://wsfdl.com/python/2013/08/16/%E7%90%86%E8%A7%A3Python%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9 ...

  4. js读取json方法

    json也是对象,可以直接使用对象调用 var json = {contry:{area:{man:"12万",women:"10万"}}}; json.con ...

  5. OTL翻译(8) -- otl_long_string/otl_long_unicode_string类

    otl_long_string/olt_long_unicode_string 这两个类主要用来处理大对象数据.从OTL4.0版本开始,otl_long_string还可以处理任何类型的RAW/BIA ...

  6. 网站流量分析指标-PV/UV/PR/IP

    网站数据分析,经常会统计一个页面或者一个网站或者其他情况的PV/UV.下面简单说一下,这些量PV/UV/PR/IP. 1.PV PV(page view),即页面浏览量,或点击量.通常是衡量一个网络新 ...

  7. Lichee (五) sysconfig1.fex 配置系统

    sysconfig配置系统,作为一个通用的软件平台,还希望通过它,可以适应用户不同的方案.通过给出一个对应的配置,用户的方案就可以自动运行,而不需要修改系统里面的代码,或者重新给出参数. 配置脚本的本 ...

  8. 解决 ECSHOP v273 产品详情页面评论不显示的问题

    问题描述:   最近同事使用ECSHOP v273帮客户开发了一个商城系统,部署到服务器在测试的时候发现产品详情页面里测试的评论不显示,只显示了数量(其实是产品购买的次数)   因为同事搞了好长时间都 ...

  9. [Node.js]30. Level 6: Listen 'Question' from client, and then Answer the Question

    Clients can also answer each other questions, so let's build that feature by first listening for the ...

  10. (剑指Offer)面试题3:二维数组中的查找

    题目: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序. 请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 思路: 鉴于数组的规律 ...