Spotr - Basic Example

Developer
Size
3,875 Kb
Views
22,264

How do I make an spotr - basic example?

Featuring spotr's Field querying functionality. What is a spotr - basic example? How do you make a spotr - basic example? This script and codes were developed by Andy Merskin on 01 November 2022, Tuesday.

Spotr - Basic Example Previews

Spotr - Basic Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>spotr - Basic Example</title> <link href="https://fonts.googleapis.com/css?family=Arimo:400,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"> <h1>Basic Field Searching</h1> <p> Here, we are searching on two fields: <strong>company name</strong> and <strong>ticker symbol</strong>. </p> <div class="example"> <div class="inputGroup"> <input type="text" v-model="query" @keydown.esc="clearQuery" placeholder="Search for tickers, companies"> </div> <div class="results"> <div class="result" v-for="result in results"> <div class="resultCompany">{{result.Company}}</div> <div class="resultTicker">{{result.Ticker}}</div> </div> </div> </div> <p class="colorGray alignCenter" v-if="this.query.length === 0"> Try typing <strong>goog</strong>, <strong>corp</strong>, or <strong>finance</strong>. </p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
<script src='https://unpkg.com/spotr'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Spotr - Basic Example - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: 'Arimo', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #34495e; line-height: 1.5em; background-color: #ecf0f1;
}
#app { width: 480px; margin: 60px auto; padding: 30px 0;
}
h1 { font-size: 1em; color: #2c3e50;
}
.inputGroup { width: 480px; margin: 0 auto;
}
.inputGroup input { width: 100%; height: 60px; margin: 0 auto; padding: 0 15px; font-size: 24px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); border-radius: 2px; border: none; -webkit-transition: box-shadow 0.15s ease; transition: box-shadow 0.15s ease;
}
.inputGroup input:focus { box-shadow: 0 1px 10px rgba(52, 152, 219, 0.4); outline: none;
}
.inputGroup input::-webkit-input-placeholder { color: #95a5a6;
}
.inputGroup input::-moz-placeholder { color: #95a5a6;
}
.inputGroup input:-ms-input-placeholder { color: #95a5a6;
}
.inputGroup input::placeholder { color: #95a5a6;
}
.results { width: 480px; margin: 15px auto;
}
.result { padding: 15px; background-color: #fff;
}
.result + .result { margin-top: 2px;
}
.resultTicker { margin-top: 5px; color: #aaa;
}
.alignCenter { text-align: center;
}
.colorGray { color: #95a5a6;
}

Spotr - Basic Example - Script Codes JS Codes

'use strict';
Vue.config.devtools = true;
var search = new Spotr({ collection: [], fields: { Ticker: { boost: 8, fuzzy: 1 }, Company: { boost: 9, fuzzy: 1 } }
});
var companiesUrl = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/19332/companies.json';
var app = new Vue({ el: '#app', created: function created() { axios.get(companiesUrl).then(function (res) { search.collection = res.data; }); }, data: function data() { return { query: '' }; }, computed: { results: function results() { if (this.query && this.query.length > 1) { return search.query(this.query).slice(0, 10); } } }, methods: { clearQuery: function clearQuery() { this.query = ''; } }
});
Spotr - Basic Example - Script Codes
Spotr - Basic Example - Script Codes
Home Page Home
Developer Andy Merskin
Username andymerskin
Uploaded November 01, 2022
Rating 3
Size 3,875 Kb
Views 22,264
Do you need developer help for Spotr - Basic Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Merskin (andymerskin) Script Codes
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!