Play支持频道搜索

src/components/Film.vue

@@ -619,7 +619,6 @@ export default {
       }
     },
     querySearch (queryString, cb) {
-      if (this.searchList.length === 0) return
       var searchList = this.searchList.slice(0, -1)
       var results = queryString ? searchList.filter(this.createFilter(queryString)) : this.searchList
       // 调用 callback 返回建议列表的数据
@@ -748,7 +747,7 @@ export default {
         if (this.searchGroup === undefined) setting.find().then(res => { this.searchGroup = res.searchGroup })
       })
     },
-    getSearchViewMode() {
+    getSearchViewMode () {
       setting.find().then(res => {
         this.searchViewMode = res.searchViewMode === undefined ? 'picture' : res.searchViewMode
       })

src/components/Play.vue

@@ -192,10 +192,23 @@
           </span>
         </div>
         <div class="list-body zy-scroll" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
-          <el-tree
+          <el-autocomplete
+            clearable
+            size="small"
+            v-model.trim="searchTxt"
+            value-key="keywords"
+            :fetch-suggestions="querySearch"
+            :popper-append-to-body="false"
+            popper-class="popper"
+            placeholder="搜索"
+            @keyup.enter.native="searchAndRecord">
+           <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-autocomplete>
+          <el-tree ref="channelTree"
             :data="channelListForShow"
             :props="defaultProps"
             accordion
+            :filter-node-method="filterNode"
             @node-click="handleNodeClick">
           </el-tree>
         </div>
@@ -205,7 +218,7 @@
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import { star, history, setting, shortcut, mini, channelList, sites } from '../lib/dexie'
+import { star, history, setting, shortcut, mini, channelList, iptvSearch, sites } from '../lib/dexie'
 import zy from '../lib/site/tools'
 import Player from 'xgplayer'
 import HlsJsPlayer from 'xgplayer-hls.js'
@@ -306,6 +319,8 @@ export default {
       isStar: false,
       isTop: false,
       mini: {},
+      searchTxt: '',
+      searchRecordList: [],
       channelList: [],
       channelListForShow: [],
       channelListShow: false,
@@ -393,16 +408,67 @@ export default {
       } else {
         span.innerText = `${this.name}`
       }
+    },
+    searchTxt () {
+      if (this.searchTxt === '清除历史记录...') {
+        this.clearSearchRecords()
+        this.searchTxt = ''
+      }
+      this.searchEvent()
     }
   },
   methods: {
     ...mapMutations(['SET_VIEW', 'SET_DETAIL', 'SET_VIDEO', 'SET_SHARE']),
     handleNodeClick (node) {
-      console.log(node)
       if (node.channel) {
         this.playChannel(node.channel)
       }
     },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.toLowerCase().includes(value.toLowerCase())
+    },
+    querySearch (queryString, cb) {
+      var searchRecordList = this.searchRecordList.slice(0, -1)
+      var results = queryString ? searchRecordList.filter(this.createFilter(queryString)) : this.searchRecordList
+      // 调用 callback 返回建议列表的数据
+      console.log(results)
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (item) => {
+        return (item.keywords.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    getSearchRecordList () {
+      iptvSearch.all().then(res => {
+        this.searchRecordList = res.reverse()
+        this.searchRecordList.push({ id: this.searchRecordList.length + 1, keywords: '清除历史记录...' })
+      })
+    },
+    addSearchRecord () {
+      const wd = this.searchTxt
+      if (wd) {
+        iptvSearch.find({ keywords: wd }).then(res => {
+          if (!res) {
+            iptvSearch.add({ keywords: wd })
+          }
+          this.getSearchRecordList()
+        })
+      }
+    },
+    clearSearchRecords () {
+      iptvSearch.clear().then(res => {
+        this.getSearchRecordList()
+      })
+    },
+    searchEvent () {
+      this.$refs.channelTree.filter(this.searchTxt)
+    },
+    searchAndRecord () {
+      this.addSearchRecord()
+      this.searchEvent()
+    },
     async getUrls () {
       if (this.video.key === '') {
         return false