Dropdown With Search Box In VueJs

Dropdown With Search Box In Vue Js

In this post we will learn how to create dropdown with search functionality in vuejs. To implement this feature we use vue js cdn and search box cdn. Below are the steps to implement search box in dropdown.

Step 1 : Add These CDN
<script src="https://unpkg.com/vuejs-datepicker"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-simple-search-dropdown@latest/dist/vue-simple-search-dropdown.min.js"></script>
Step 2 : Add Html Code
<html>
<body id="app">
<Dropdown  class="form-control" name="subject"  :options="options"       
			placeholder="Please select an animal" autocomplete="off"
>
</Dropdown>
</body>
</html>
Add Vue Js Code
<script>
const app = new Vue({
  el: '#app',  
  data: {  
	options: [
              { name: 'Delhi', id: '1' },
              { name: 'Bhopal', id: '2' },
              { name: 'Patna', id: '3' },
              { name: 'Ranchi', id: '4' },
              { name: 'Noida', id: '5' }                         
     ],    
  },   
  }  
})
</script>

 

↑
Exit mobile version