Twitter Bootstrap Question posted in

Creating Vue Search Bar | How to hide/show data based on input? – Twitter bootstrap

I am creating a dynamic search bar that will filter a sidebar full of names based on user input. However, I am having trouble temporarily hiding and showing data based on the search bar’s value on keyup. What is the best way to achieve this the “Vue way”?

On keyup, I want to filter through all of the this.people data and only show names that contain the value of the search input.

Below is what my code looks like

Vue.component('sidebar',{
    props: ['people', 'tables'],
    data: () => {
        return {
            fullName: ''
        }
    },
    computed: {
        computed() {
            return [this.people, this.tables].join()
        }
    },
    template: 
    `
        <div id="sidebarContain" v-if="this.people">
            <input id="sidebar-search" type="text" placeholder="Search..." @keydown="searchQuery">
            <select id="sidebar-select" @change="sidebarChanged">
                <option value="AZ">A-Z</option>
                <option value="ZA">Z-A</option>
                <option value="notAtTable">No Table</option>
                <option value="Dean's Guest">Dean's Guest</option>
                <option value="BOO | VIP">BOO | VIP</option>
            </select>
            <div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id" :style="calcRegColor(person)">
                <span v-if="person.table_name">{{person.first_name + ' ' + person.last_name + ' - ' + person.table_name}}</span>
                <span v-else>{{person.first_name + ' ' + person.last_name}}</span>
            </div>
        </div>
    `,
    methods: {
        isCheckedIn(person) {
           return person.reg_scan == null ? true : false;
        },
        isHidden(person)
        {
            console.log("here");
        },
        calcRegColor(person)
        {
            switch(person.registration_type)
            {
                case "Dean's Guest" :
                    return {
                        color: 'purple'
                    }
                    break;
                case "BOO | VIP" :
                    return {
                        color: 'brown'
                    }
                    break;
                case "Student" :
                    return {
                        color: 'green'
                    }
                    break;
                case "Faculty":
                case "Staff":
                    return {
                        color: 'blue'
                    }
                    break;
                case "Alumni Club Leader":
                    return {
                        color: 'gold'
                    }
                    break;
                case "Table Guest" :
                    return {
                        color: 'pink'
                    }
                    break;
                default: 
                    return {
                        color: 'black'
                    }
            }
        }
    },
    watch: {
        computed() {
            console.log("People and Tables Available");
        }
    }
});

var app = new Vue({
  el: '#main',
  data: {
    tables: {},
    people: [],
    currentAlerts: [],
    lastDismissed: []
  },
  methods: {
    loadTables() {
        $.ajax({
          method: 'POST',
          dataType: 'json',
          url: base_url + 'users/getTableAssignments/' + event_id
        }).done(data => {
          this.tables = data; 
        });
    },
    loadPeople() {
        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: base_url + 'users/getParticipants2/' + event_id
        }).done(data => {
            this.people = data;
            this.sortSidebar(this.people);
        });
    },
    loadCurrentAlerts() {
        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: base_url + 'alerts/getAlerts/' + event_id
        }).done(data => {
            this.currentAlerts = data;
        });
    },
    loadLastDismissed(num = 15)
    {
        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: base_url + 'alerts/getLastDismissed/' + event_id + '/' + num
        }).done(data => {
            this.lastDismissed = data;
        });
    },
    setRefresh() {
        setInterval(() => {
            console.log("Getting People and Tables");
            this.loadPeople();
            this.loadTables();
        }, 100000);             
    },
    makeTablesDraggable() {
        $(document).on("mouseenter", '.table', function(e){
         var item = $(this); 
         //check if the item is already draggable
         if (!item.is('.ui-draggable')) {
                 //make the item draggable
                 item.draggable({
                    start: (event, ui) => {
                        console.log($(this));
                    }
                 });
          }
        });
    },
    makePeopleDraggable() {
         $(document).on("mouseenter", '.person', function(e){
         var item = $(this); 
         //check if the item is already draggable
         if (!item.is('.ui-draggable')) {
                 //make the item draggable
            item.draggable({
                appendTo: 'body',
                containment: 'window',
                scroll: false,
                helper: 'clone',
                start: (event, ui) => {
                    console.log($(this));
                }
            });
          }
        });       
    }
    makeDroppable() {
        $(document).on("mouseenter", ".dropzone, .table", function(e) {
            $(this).droppable({
                drop: function(ev, ui) {
                    console.log("Dropped in dropzone");
                }
            });
        });
    }
 },
  mounted() {
    this.loadTables();
    this.loadPeople();
    this.loadCurrentAlerts();
    this.loadLastDismissed();
    this.setRefresh();
    this.makeTablesDraggable();
    this.makePeopleDraggable();
    this.makeDroppable();
  }
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
</head>
<div id="app">
    <sidebar :people="people" :tables="tables"></sidebar>
</div>
Tags:

2

Answers


  1. 0

    You can change the people property in sidebar into a computed property, which will be calculated based on user’s input.

    So change the sidebar code to

    <div v-for="person in filteredPeople" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id" :style="calcRegColor(person)">
  <span v-if="person.table_name">{{person.first_name + ' ' + person.last_name + ' - ' + person.table_name}}</span>
  <span v-else>{{person.first_name + ' ' + person.last_name}}</span>
</div>

    and add a computed property

    computed: {
    filteredPeople () {
        // Logic to filter data
    } 
}
    Login or Signup to reply.
  2. 0

    A foolish aproach that I use, without computed properties:

    JS:

    new Vue({
  el: '#app',
  data: {
    list: [],
    filteredList: []
  },
  mounted(){
    this.filteredList = this.list
  },
  methods: {
    filter(e){
      if(e.target.value === '') this.filteredList = this.list
      else {
        this.filteredList = []
        this.list.forEach(item=>{
          if(list.name.includes(e.target.value)) this.filteredList.push(item)
        })
      }
    }
  }
})

    The "name" property of list object can be changed to whatever property you want to look for.

    HTML:

    <input @keyup="filter" id="search" type="search" required>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search