From 8a17aef811e6131ed8913d3b94d2d46122467694 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Wed, 22 Mar 2017 18:35:12 -0700
Subject: [PATCH] better dev template for ajax

---
 dev.html   |  2 +-
 src/dev.js | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/dev.html b/dev.html
index a5cf401..31e56da 100644
--- a/dev.html
+++ b/dev.html
@@ -35,7 +35,7 @@
         <v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
         <v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
         <v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select>
-        <v-select placeholder="loading" loading></v-select>
+        <v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
     </div>
 </body>
 
diff --git a/src/dev.js b/src/dev.js
index 4a619b4..50f02e3 100644
--- a/src/dev.js
+++ b/src/dev.js
@@ -1,6 +1,10 @@
 import Vue from 'vue'
 import vSelect from './components/Select.vue'
 import countries from 'docs/data/advanced.js'
+import debounce from 'lodash/debounce'
+import resource from 'vue-resource'
+
+Vue.use(resource)
 
 Vue.component('v-select', vSelect)
 
@@ -12,6 +16,19 @@ new Vue({
   data: {
     placeholder: "placeholder",
     value: null,
-    options: countries
+    options: countries,
+    ajaxRes: []
+  },
+  methods: {
+    search(search, loading) {
+      loading(true)
+      this.getRepositories(search, loading, this)
+    },
+    getRepositories: debounce((search, loading, vm) => {
+      vm.$http.get(`https://api.github.com/search/repositories?q=${search}`).then(res => {
+        vm.ajaxRes = res.data.items
+        loading(false)
+      })
+    }, 250)
   }
 })