在这里插入代码片一、HTML部分
二、JS板块
```javascriptdata() {return {inputValue: "", //输入框中的内容isShow: false, //控制搜索的问题显示隐藏resData: [{ name: "大话西游之月光宝盒" },{ name: "大话西游之仙履奇缘" },{ name: "功夫" },{ name: "喜剧之王" },{ name: "武状元苏乞儿" },{ name: "食神" },{ name: "百变星君" },{ name: "逃学威龙1" },{ name: "逃学威龙2" },{ name: "逃学威龙3" },{ name: "赌圣" },],};},computed: {searchData() {const QueryList = [];this.resData.filter((item) => {if (item.name.indexOf(this.inputValue) > -1) {QueryList.push(item);}});return QueryList;},},methods: {//监听输入事件，当input中有内容时，下面的搜索列表显示出来inputFunc() {if (this.inputValue.length > 0) {this.isShow = true;} else {this.isShow = false;}},// 查询出来的结果选中handleSelect(v) {this.inputValue = v.name;this.isShow = false;console.log(v);},},
三、CSS样式input {width: 378px;height: 39px;background: rgba(0, 0, 0, 0.1);font-size: 18px;font-weight: 400;color: #cccccc;border: none;outline: none;padding-left: 15px;background: url("~@图片地址");}.showlist ｛position: absolute;color: #fff;padding-left: 20px;margin-left: 18px;line-height: 39px;cursor: pointer;width: 360px;background: rgba(0, 0, 0, 0.8);z-index: 1;}
