Javascript 根据文本框中的用户输入实时筛选数组

Hey希望实时过滤vue js中组件创建期间呈现的JSON对象数组

在安装的生命周期挂钩上，应具有以下内容：

const search = document.querySelector('.search input');
    search.addEventListener('keyup',()=>{
      const term = search.value.trim();
         
         this.books = this.books.Title.filter(function (item) {
            return item.Title.match(term)   
})
      })

我尝试了几种不同的方法，但在数组中找不到允许我动态筛选和更新数组的函数

任何能给我指出正确方向的东西都会有帮助

搜索框：

  <form class="search">
      <input class="form-control m-auto" type="text" name="search" placeholder="search" />
   </form>

完整代码

template>
  <div>
    <div class="shelf" style="margin: 40px;">
      <h6>Here you can search a title of any book that is in the list</h6>
      <label for="fname">Search term:</label>
      <input type="text" id="fname" v-model="searchText">
      <ul class="collapsible popout">
        <h6 v-if="searchResults.length">Search results</h6>
        <li class="li" v-for="(book,index) in searchResults" :key="index">
          <div class="collapsible-header">
            <h5>
              {{ book.Title }}
            </h5>
          </div>
          <div class="collapsible-body">
            <p>Author: {{book.Author}}</p>
            <p>Category: {{book.Category}}</p>
            <div class="loan" v-if="book.Loan">on loan</div>
            <div class="owned" v-if="book.Owned">Owned</div>
            <!-- vue-router required to run this -->
            <!-- <router-link :to="{name:'EditBook', params:{id:book.id}}">
            <i class="material-icons">edit</i>
            </router-link>-->
          </div>
        </li>
      </ul>
    </div>
    <h5>Here is the list of avalaible books</h5>
    <ul class="collapsible popout" style="margin: 40px;">
      <li class="li" v-for="(book,index) in books" :key="index">
        <div class="collapsible-header">
          <h5>
            <book-icon/>
            {{ book.Title }}
          </h5>
        </div>
        <div class="collapsible-body">
          <p>Author: {{book.Author}}</p>
          <p>Category: {{book.Category}}</p>
          <div class="loan" v-if="book.Loan">on loan</div>
          <div class="owned" v-if="book.Owned">Owned</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import db from '@/firebase/init'
import firebase from 'firebase'
import M from 'materialize-css'
export default {
  name: 'Shelf',
  data () {
    return {
      books:[],
      searchText: ''
    }
  },
  mounted(){
       var DropDownElems = document.querySelectorAll('.dropdown-trigger');
        let options = {
          inDuration: 300,
          outDuration: 300,
          hover: true, // Activate on hover
          coverTrigger: false, // Displays dropdown below the button
          };
        M.Dropdown.init(DropDownElems,options);
        var ColapseElems = document.querySelectorAll('.collapsible');
       M.Collapsible.init(ColapseElems)

    },
  created(){
      db.collection('Bookshelf').get()
      .then(snapshot=>{
        snapshot.forEach(book => {
          let b = book.data()
          b.id = book.id
          this.books.push(b)
             });
      })
    },
 computed: {
     searchResults() {
     if (this.searchText.length === 0) return "";
         return this.books.filter(book => book.Title.match(this.searchText));    
    }
  }
}
</script>
<style >
.loan{
    background: #ccc;
    box-shadow: 4px 3px 8px 1px #969696;
    -webkit-box-shadow: 4px 3px 8px 1px #969696;
    width: 150px;
    height: 150px;
}
.li{
  margin-left: 70px auto;
  margin-right: 70px auto;
 
}
.edit{
  left: 80%;
}
</style>

模板>
在这里，您可以搜索列表中任何书籍的标题
搜索词：

搜索结果

{{book.Title}}
作者：{{book.Author}

类别：{{book.Category}

借调
拥有


这是可用书籍的清单


{{book.Title}}
作者：{{book.Author}

类别：{{book.Category}

借调
拥有


从“@/firebase/init”导入数据库
从“firebase”导入firebase
从“物化css”导入M
导出默认值{
名称：'货架'，
数据（）{
返回{
书籍：[]，
搜索文本：“”
}
},
安装的（）{
var dropdownlems=document.querySelectorAll（'.dropdownttrigger'）；
让选项={
硬结：300，
持续时间：300，
悬停：true，//悬停时激活
coverTrigger:false，//在按钮下方显示下拉列表
};
M.Dropdown.init（dropdownlems，options）；
var ColapseElems=document.querySelectorAll（'.collapsable'）；
M.collapseelems可折叠初始值
},
创建（）{
db.collection（'Bookshelf'）.get（）
。然后（快照=>{
snapshot.forEach（book=>{
设b=book.data（）
b、 id=book.id
这个。书。推（b）
});
})
},
计算：{
搜索结果（）{
如果（this.searchText.length==0）返回“”；
返回this.books.filter（book=>book.Title.match（this.searchText））；
}
}
}
.贷款{
背景：#ccc；
盒影：4px 3px 8px 1px#9696；
-网络工具包盒阴影：4px 3px 8px 1px#969696；
宽度：150px；
高度：150像素；
}
李先生{
左边距：70px自动；
右边距：70px自动；
}
.编辑{
左：80%；
}

我能够验证books数组的输出是否正常，所有看起来都很好

阵列示例： 0: 作者：“字符串” 类别：“字符串” 贷款：布尔 拥有：布尔值 ReadingNow:布尔值 标题：“字符串” id:“字符串”

从控制台：

运行时返回this.books.filter（book=>console.log（book.Title））；为了调试，我得到一个字符串

---

您已经非常接近了，但还需要一些改进

首先，您不需要添加“标准”键控事件侦听器。使用vue，您可以使用

v-model

：

在Vue应用程序中：

//...
name: 'Shelf',
  data () {
    return {
      books:[],
      term: ''
    }
  },
//...

我建议您使用计算属性来获取过滤后的书籍，无需付出任何努力：

计算：{
filteredBooks（）{
const filteredBooks=this.books.filter（book=>{
const regex=new RegExp（this.term.trim（））；
返回字符串（book.Title）.match（正则表达式）
});
返回filteredBooks；
}
}

现在，您可以在foundedBooks中进行迭代，以获得过滤过的书籍：

{{index+1}}。{{book.Title}}

您已经非常接近了，但还需要一些改进

首先，您不需要添加“标准”键控事件侦听器。使用vue，您可以使用

v-model

：

在Vue应用程序中：

//...
name: 'Shelf',
  data () {
    return {
      books:[],
      term: ''
    }
  },
//...

我建议您使用计算属性来获取过滤后的书籍，无需付出任何努力：

计算：{
filteredBooks（）{
const filteredBooks=this.books.filter（book=>{
const regex=new RegExp（this.term.trim（））；
返回字符串（book.Title）.match（正则表达式）
});
返回filteredBooks；
}
}

现在，您可以在foundedBooks中进行迭代，以获得过滤过的书籍：

{{index+1}}。{{book.Title}}

欢迎使用vue，让我举一个如何使用vue的示例：

var-app=新的Vue({
el:“#应用程序”，
数据：{
//我们的searchText属性，用于筛选书籍
搜索文本：“”，
//加博的一系列书籍
书籍：[{
标题：“El coronel no tiene quien le escriba”
},
{
标题：“太阳城100周年”
},
{
标题：“错误备忘录”
},
{
标题：“cólera村的爱”
}
]
},
计算：{
//计算属性，神奇地监听更改
//在searchText属性中
搜索结果（）{
//如果searchText属性为空，则返回空字符串
如果（this.searchText.length==0）返回“”；
//仅返回标题与匹配的书籍
//搜索文本字符串
返回this.books.filter（book=>book.title.match（this.searchText））
}
}
})

搜索词：
{{searchResults}}

欢迎使用vue，让我举一个如何使用vue的示例：

var-app=新的Vue({
el:“#应用程序”，
数据：{
//我们的searchText属性，用于筛选书籍
搜索文本：“”，
//加博的一系列书籍
书籍：[{
标题：“El coronel no tiene quien le escriba”
},
{
标题：“太阳城100周年”
},
{
标题：“错误备忘录”
},
{
标题：“cólera村的爱”
}
]
},
计算：{
//计算属性，神奇地监听更改
//在搜索文本中