Dropdown With Search Box In VueJs

rajeshJune 4, 2020

0 1,625 Less than a minute

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>

rajeshJune 4, 2020

0 1,625 Less than a minute