Learn html, css, javascript online and how to make a webpage design

Use computed in VueJS to build input search autocomplete

Tuesday 5th of January 2021 09:16:30 PMVueJSComputedAutocomplete

In the last example we used a computed implementation of the shopping cart total value calculation. Today we will continue to use computed for autocomplete searches when inputting text.

Autocomplete Searches Style

<style>
        body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #eee;font-family: Arial, Helvetica, sans-serif;}
        .box{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
        .box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
        .box .form-control{width: 100%;height: 40px;margin-bottom: 20px;}
        .box .form-control input{width: 100%;max-width: 100%;height: 100%;background: none;outline:none;border:1px solid #e1e1e1;display: flex;padding:5px 10px;box-sizing: border-box;border-radius: 4px;}
        .box ul{margin:0px;padding:0px;}
        .box ul li{display: block;}
        .box ul li a{display: flex;height: 40px;border-bottom: 1px solid #eee;align-items: center;color:#333;text-decoration: none;}
    </style>

 

Vue template

<div id="app">
    <div class="box">
        <div class="title">Search Autocomplete</div>
        <div class="form-control">
            <input type="text" v-model="keyword" placeholder="Enter search keyword" />
        </div>
        <ul>
            <li v-for="(item, index) in result"><a href="">{{ index+1 }}. {{ item }}</a></li>
        </ul>
    </div>
</div>

 

Full code Autocomplete Searches

<!DOCTYPE html>
<html>
<head>
    <title>Use computed in VueJS to build input search autocomplete - HtmlcssDownload.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #eee;font-family: Arial, Helvetica, sans-serif;}
        .box{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
        .box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
        .box .form-control{width: 100%;height: 40px;margin-bottom: 20px;}
        .box .form-control input{width: 100%;max-width: 100%;height: 100%;background: none;outline:none;border:1px solid #e1e1e1;display: flex;padding:5px 10px;box-sizing: border-box;border-radius: 4px;}
        .box ul{margin:0px;padding:0px;}
        .box ul li{display: block;}
        .box ul li a{display: flex;height: 40px;border-bottom: 1px solid #eee;align-items: center;color:#333;text-decoration: none;}
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <div class="title">Search Autocomplete</div>
        <div class="form-control">
            <input type="text" v-model="keyword" placeholder="Enter search keyword" />
        </div>
        <ul>
            <li v-for="(item, index) in result"><a href="">{{ index+1 }}. {{ item }}</a></li>
        </ul>
    </div>
</div>
   
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            data: ["HTML","CSS","Javascript","Python","PHP","Java"],
            keyword: ''
        },
        computed:{
            result: function(){
                return this.data.filter((e)=>{
                    return e.toLowerCase().indexOf(this.keyword.toLowerCase())>-1;
                })
            }
        },
        methods:{
            
        }
    })
    
</script>
    
</body>
</html>

 

Result for example

We are Recommending you: