Vue - 根据输入关键字过滤数组列表(列表搜索功能)

前言

在这里插入图片描述
输入关键字,自动匹配带有关键字的列表,过滤列表数组。
在这里插入图片描述
案例前的准备(了解两个数组方法)

includes()

  1. 解释:该方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
    JavaScript版本:ECMAScript 6
  2. 用法:arr.includes(searchElement,fromIndex)
    searchElement:必须。需要查找的元素值。
    fromIndex:可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
  3. 细节:布尔值。如果找到指定值返回 true,否则返回 false。

filter()

  1. 解释:方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
    JavaScript版本:1.6
  2. 用法:arr.filter(function(currentValue,index,arr), thisValue)
    function(currentValue, index,arr):必须。函数,数组中的每个元素都会执行这个函数
    函数参数:
    currentValue:必须。当前元素的值
    index:可选。当前元素的索引值
    arr:可选。当前元素属于的数组对象
    thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。
    如果省略了 thisValue ,“this” 的值为 “undefined”
  3. 细节:返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <!-- CDN -->
    <script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 搜索框 -->
<input type="text" placeholder="请输入“名称”关键字" v-model="key">
<!-- 数据列表 -->
<ul>
    <li v-for="item in query(key)">
        ID:{{ item.id }}——名称:{{ item.name }}
    </li>
</ul>
</div>

<!-- vue -->
<script>
var vm = new Vue({
  el:'#app',
  data:{
    // 关键字
    key:'',
    // 列表数据
    list:[
        {id:1,name:'爱信变速箱'},
        {id:2,name:'干式双离合变速箱'},
        {id:3,name:'湿式双离合变速箱'},
        {id:4,name:'自然吸气发动机'},
        {id:5,name:'涡轮增压发动机'},
    ],
  },
  methods:{
    query(key){
    	// 我这里直接return(也可赋给变量return变量出去)
        return this.list.filter(item => {
        	// 如果list(name)包含key(输入框) => true
            if(item.name.includes(key)){
            	// 返回item
                return item;
           }
       })
    }
  },
})
</script>
</body>
</html>

如果本文存在错误或您有更好的办法留言指出即可,欢迎赐教!
If there are any mistakes in this article or you have a better way to leave a message to point out it, you are welcome to comment!

<div class="post-text" itemprop="text"> <p>I have a question. On my site (Concrete 5 based) I have a block to display a list of icons. I have this array. (The array has many more icons than what I've shown, this is just for an example.)</p> <pre><code> <?php $options = array( 'icon-adjust' => 'Icon Adjust', 'icon-adjustments' => 'Icon Adjustments', 'icon-adn' => 'Icon Adn', 'icon-alarmclock' => 'Icon Alarmclock', 'icon-align-center' => 'Icon Align-center', 'icon-align-justify' => 'Icon Align-justify', 'icon-align-left' => 'Icon Align-left', 'icon-align-right' => 'Icon Align-right', 'icon-ambulance' => 'Icon Ambulance', 'icon-anchor' => 'Icon Anchor', 'icon-anchor2' => 'Icon Anchor2', ); ?> </code></pre> <p>I want to modify my search box so a user can type in something to filter out results from in the array. (Example: if they search for anchor, they'd see the two icon-anchor fields).</p> <p>Can anyone help me out with how to go about this?</p> <p>Here is my code for future reference:</p> <pre><code> <script> $('input[name=fromPages]').select2({ placeholder: "<?=t('Search for a Page')?>", minimumInputLength: 1, width: '100%', multiple: true, ajax: { url: "<?=$view->action('load_pages')?>", dataType: 'json', quietMillis: 250, data: function (term, page) { return { q: term }; }, results: function (data, page) { // parse the results into the format expected by Select2. var results = []; $.each(data, function(i, concretePage) { results.push({'id': concretePage.id, 'text': concretePage.name}); }); return { results: results }; }, cache: true } }); </script> </code></pre> <p>And for the select box:</p> <pre><code><div class="form-group"> <?php echo $form->label('fromPages', 'Search for an Icon')?> <div> <?php echo $form->hidden('fromPages'); ?> </div> </div> </code></pre> <p>and a picture: (the top search box would filter results from the opened list) <a href="http://i.imgur.com/Ksrb7iQ.png?1" rel="nofollow">http://i.imgur.com/Ksrb7iQ.png?1</a></p> </div>
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页