From 26148830e9f0087fc83bff7c5ce320038220c5ae Mon Sep 17 00:00:00 2001 From: Daniel Diaz <39510674+IslandRhythms@users.noreply.github.com> Date: Tue, 11 Jan 2022 17:38:47 -0500 Subject: [PATCH 1/3] search article --- src/tutorials.js | 8 +++ tutorials/vue/search.md | 134 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 142 insertions(+) create mode 100644 tutorials/vue/search.md diff --git a/src/tutorials.js b/src/tutorials.js index 1592a40c8..0ee9bafd1 100644 --- a/src/tutorials.js +++ b/src/tutorials.js @@ -5,6 +5,14 @@ const moment = require('moment'); const axiosPath = require('./axiosPath'); const tutorials = [ + { + title: 'How to Create a Functioning Search Bar in Vue', + raw: './tutorials/vue/search.md', + url: '/tutorials/vue/search', + description: 'Placeholder Description', + tags: ['vue'], + date: moment('2022-01-11') + }, { title: 'Handle POST Form Data with Express JS', raw: './tutorials/express/post-form.md', diff --git a/tutorials/vue/search.md b/tutorials/vue/search.md new file mode 100644 index 000000000..7d8fdfbac --- /dev/null +++ b/tutorials/vue/search.md @@ -0,0 +1,134 @@ +To create a functioning search bar component, do the following: + + +
+ + + + +```css +.search-container { + position: relative; + display: flex; + height: 80px; + border-radius: var(--border-radius); + padding-left: 10px; + margin-bottom: 20px; + background-color: white; +} + +.search { + display: inline-flex; + flex: 1 1 300px; + cursor: text; + position: relative; + border-radius: 24px; + padding-top: 10px; + padding-bottom: 10px; + padding-left:20px; + padding-right:20px; + margin-right: 10px; + width: 100%; +} + +.searchTerm { + outline: none; + color: #9DBFAF; + width: 100%; + padding: .5rem .5rem .5rem 0; + flex: 1; + background-color: var(--text-background-grey) +} + +.searchTerm:focus{ + color: var(--medium-purple); +} +``` + +```javascript +Vue.component('search', { + data: function() { + return { + searchQuery: '', + } + }, + methods: { + search: async function() { + const res = await fetch(`httpbin.org/get?keyword=${this.searchQuery}`).then((res) => {return res.json()}); + if(Object.values(res.args).includes(this.searchQuery)) return true; + return false; + }, + }, + template: ` +
+
+ +
+
+ ` +}); +``` + From a42ac3f763f2a93b80ffce7052fbae775994794c Mon Sep 17 00:00:00 2001 From: Daniel Diaz <39510674+IslandRhythms@users.noreply.github.com> Date: Tue, 11 Jan 2022 17:39:41 -0500 Subject: [PATCH 2/3] Update search.md --- tutorials/vue/search.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/tutorials/vue/search.md b/tutorials/vue/search.md index 7d8fdfbac..43d7208e1 100644 --- a/tutorials/vue/search.md +++ b/tutorials/vue/search.md @@ -116,17 +116,19 @@ Vue.component('search', { } }, methods: { - search: async function() { - const res = await fetch(`httpbin.org/get?keyword=${this.searchQuery}`).then((res) => {return res.json()}); - if(Object.values(res.args).includes(this.searchQuery)) return true; - return false; + search: async function() { + const res = await fetch(`https://httpbin.org/get?keyword=${this.searchQuery}`).then((res) => {return res.json()}); + this.result = Object.values(res.args).find((element) => element.toLowerCase() == this.searchQuery.toLowerCase()); }, }, template: ` +
+
+ {{result}}
` }); From 5d460e9aabf8509c077168115c222e20039eaa89 Mon Sep 17 00:00:00 2001 From: Daniel Diaz <39510674+IslandRhythms@users.noreply.github.com> Date: Wed, 19 Jan 2022 14:20:11 -0500 Subject: [PATCH 3/3] made requested changes --- tutorials/vue/search.md | 43 ++++------------------------------------- 1 file changed, 4 insertions(+), 39 deletions(-) diff --git a/tutorials/vue/search.md b/tutorials/vue/search.md index 43d7208e1..5b141b4b9 100644 --- a/tutorials/vue/search.md +++ b/tutorials/vue/search.md @@ -1,4 +1,7 @@ -To create a functioning search bar component, do the following: +To create a functioning search bar component, take advantage of the `keyup` event listener. +You should use the `enter` key as it is the most intuitive, so `v-on:keyup.enter`. +When the user presses the `enter` key, it will trigger the `search()` function, which in turn will make a request to `httpbin.org` for the data and then search for the desired result. +