My typeahead wrapper

My typeahead wrapper - w

by eglowc

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.15/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.0.8/vue-strap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>

JavaScript

var d = [{
  "accountId": "han.lee",
  "employeeName": "이현철",
  "jobPart": "사내정보시스템"
}, {
  "accountId": "ringo.j",
  "employeeName": "정진수",
  "jobPart": "사내정보시스템"
}, {
  "accountId": "loui.kwon",
  "employeeName": "권영민",
  "jobPart": "사내정보시스템"
}, {
  "accountId": "melissa.cho",
  "employeeName": "조영주",
  "jobPart": "선물하기셀"
}, {
  "accountId": "medivh.0923",
  "employeeName": "전현우",
  "jobPart": "인재영입"
}, {
  "accountId": "keaton.kil",
  "employeeName": "길기호",
  "jobPart": "다음뉴스"
}];



Vue.component('typeahead', VueStrap.typeahead);

Vue.component('mytypeahead', {
  template: 
    '<div> ' +
    '<typeahead v-if="this.modl.length==0" :data="data" :on-hit="onhit" >  </typeahead> ' +
    '<input v-show="this.modl.length!=0" v-model="modl">' +
    '</div>',
  props: ['modl', 'data'],
  methods: {
    "onhit": function (s) {
      console.log("got hit", s)
      this.modl = s; //result now exposed to parent though "modl"
    }
  }
});

new Vue({
  el: '#app',
  data: {
    modl: '',
    mydata: d
  }
});