输入框模糊搜索

2019-12-02 admin

<nav id=“sf-header” class=“navbar navbar-expand-lg navbar-light bg-white shadow-sm”></nav>

<input id=“articleId” value=“1190000021172772” class=“hidden”>

<div class=“position-relative”>

<div class=“container my-4”>

<div class=“row”>

<div class=“col-12 col-xl w-0”>

<div class=“card border-0 mb-4”>

<div class=“card-body p-lg-30”>

github地址,喜欢的可以star下哦

插件预览图

search.gif

使用教程

1.插件代码拷贝

  • 下载后把components目录下inputSearch.vue文件拷贝到自己项目目录下

2.插件全局配置

import inputSearch from './components/inputSearch.vue'

Vue.component('inputSearch', inputSearch)

3.插件使用


<template>
    <view class="content">
        <inputSearch :dataSource="dataSource" @select="handleChange" placeholder="请输入商品名称" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataSource: [{
                        id: 1,
                        name: '耐克1'
                    },
                    {
                        id: 2,
                        name: '耐克2'
                    }
                ],
            };
        },
        methods: {
            //用户点击获取的数据
            handleChange(data) {
                console.log(data)
            }
        }
    }
</script>

<style lang="scss">
    .content {
        padding:20upx;
    }
</style>

兼容性

uni-app项目中使用都兼容

样式可以自己在组件里面调整

<div class=“article-author d-flex flex-column flex-sm-row align-items-center pt-4 border-top”>

<div class=“d-flex align-items-center flex-grow-1 author-left”> </div>

<button type=“button” class=“btn btn-primary follow-user sf_do” data-dotype=“post” data-content="{“type”:“state”,“state”:false,“true”:"\u5173\u6ce8\u4f5c\u8005",“false”:"\u6b63\u5728\u5173\u6ce8"}" data-api="/iteration/api/user/1030000005602866/follow">关注作者</button>

</div>

</div>

</div>

推荐阅读

</div>

<div class=“col-12 col-xl-auto”>

<div class=“w-xl-300”>

<div class=“card border-0 mt-4”>

<div class=“card-body”>

<div class=“text-center mb-3”>

<div class=“mb25 hidden-md hidden-sm hidden-xs”>Planets <map name=“gridsMap” id=“gridsMap”></map> </div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

[转载]原文链接:https://segmentfault.com/a/1190000021172772

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80285.html

文章标题:输入框模糊搜索

相关文章
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
2015年Web:追求原有“框架”外的新功能
Web目前正在经历一场巨大的变化,ServiceWorkers、传感器访问、推送通知等方式将打破Web原有的框架。而在2015年我们可以利用这几种方式快速的改变自己的网站。在不断增多的Web功能中寻求最合适自己的功能。 Web最初的设想是一...
2015-11-12
ajax分页效果(bootstrap模态框)
ajax分页效果图: 上干货: &#x2F;** * ajax分页 *&#x2F; $(function(){ $(&quot;.modal-body&quot;).find(&quot;.pagination&quot;...
2017-02-20
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
js实现点击文本框显示日期选择器特效代码分享
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 具体代码如下: &lt;head&gt; &lt;meta htt...
2017-03-29
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来。 应用场景: 前后端一...
2017-03-29
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
Angularjs实现搜索关键字高亮显示效果
需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1、每次执行搜索操作,需清空上一次结果 2、需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键...
2017-03-03
回到顶部