vue前端实现搜索功能
代码如下<template><div class="safetyInfo"><nut-searchbar placeText="请输入详细地址/门牌号/"v-model="search"@input="submitFun"...
·
- 代码如下
<template> <div class="safetyInfo"> <nut-searchbar placeText="请输入详细地址/门牌号/" v-model="search" @input="submitFun" ref='searchInput'></nut-searchbar> <ul v-for="(list,index) in searchData" :key="index"> <li> <span>{{list.phoneName}}</span> <span>{{list.ascriptionPhone}}</span> <p>{{list.provinceName+''+list.cityName+''+list.areaName}}</p> </li> </ul> </div> </template> <script> export default { name: 'HelloWorld', data() { return { search: '', searchData: '', products: [ //假数据 { 'addressId': '6554536248428871691', 'address': 'e通世界南区', 'provinceCode': '310000', 'provinceName': '上海', 'cityCode': '310100', 'cityName': '上海市', 'areaCode': '310118', 'areaName': '青浦区', 'creater': 'system@888.com', 'createTime': '2019-07-15T10:00:39Z', 'isDelete': 1, 'isDefault': 1, 'ascriptionPhone': '17000000000', 'phoneName': '张三', 'customerCode': 'WXKY11500216249', 'channelType': 1, 'modifier': 'system@888.com', 'modifierTime': '2019-07-15T02:02:05Z', 'recordVersion': 0 }, { 'addressId': '6554536248428871691', 'address': 'e通世界南区', 'provinceCode': '310000', 'provinceName': '上海', 'cityCode': '310100', 'cityName': '上海市', 'areaCode': '310118', 'areaName': '青浦区', 'creater': 'system@888.com', 'createTime': '2019-07-15T10:00:39Z', 'isDelete': 1, 'isDefault': 1, 'ascriptionPhone': '18000000000', 'phoneName': '李四', 'customerCode': 'WXKY11500216249', 'channelType': 1, 'modifier': 'system@888.com', 'modifierTime': '2019-07-15T02:02:05Z', 'recordVersion': 0 }, { 'addressId': '6554536248428871691', 'address': 'e通世界南区', 'provinceCode': '310000', 'provinceName': '上海', 'cityCode': '310100', 'cityName': '上海市', 'areaCode': '310118', 'areaName': '青浦区', 'creater': 'system@888.com', 'createTime': '2019-07-15T10:00:39Z', 'isDelete': 1, 'isDefault': 1, 'ascriptionPhone': '18000000000', 'phoneName': '王麻子', 'customerCode': 'WXKY11500216249', 'channelType': 1, 'modifier': 'system@888.com', 'modifierTime': '2019-07-15T02:02:05Z', 'recordVersion': 0 } ] }; }, created: function () { this.inintData(); }, methods: { inintData() { this.searchData = this.products; }, submitFun() { let search = this.search; this.searchData = this.products.filter(function (product) { console.log('过滤', product); let searchField = { phoneName: product.phoneName, ascriptionPhone: product.ascriptionPhone }; return Object.keys(searchField).some(function (key) { console.log('key值', key); return String(product[key]).toLowerCase().indexOf(search) > -1; }); }); } } }; </script>
如果对数据中所有字段都进行排序将searchField换成product
更多推荐
所有评论(0)