我是使用vanUI的单元格组件van-cell渲染的搜索建议列表ui
在里面设置一个插槽,值为title(替代van-cell的属性title)
想要高亮就要用指令v-html,v-html=的值可以设置,但关键字是不断变化的,所以:
设置一个方法,传入搜索关键字
不过,这是利用vant的组件来做的,我在很多地方不会用到他的组件其实,哈哈,比如uniapp,我用uniapp更喜欢自己封装组件自己用,所以要在别的地方使搜索词高亮可以对上面的方法做出一下修改:
首先,搜索建议列表是要做成子组件的,然后将请求来的搜索建议列表和搜索框中的搜索词传进去
搭好布局,渲染建议数组,设置自定义属性data-value为搜索词(为了保存为搜索历史和当作搜索词跳转到搜索结果页),我们用插槽slot。值=建议列表的建议词,v-html定义方法,将建议词传过去
这里,高亮颜色的css要定义在全局css文件中才生效。
然后是搜索历史和跳转
最终效果: