Skip to content

Instantly share code, notes, and snippets.

@rajmayank

rajmayank/rxjs-search-bar-crossref.html

Last active March 9, 2019 18:35
Show Gist options
  • Save rajmayank/cf2f251049eba82d6b39cdfcb47bc6fc to your computer and use it in GitHub Desktop.
Save rajmayank/cf2f251049eba82d6b39cdfcb47bc6fc to your computer and use it in GitHub Desktop.
Download ZIP
RxJS Search bar
Raw
rxjs-search-bar-crossref.html
<!DOCTYPE html>
<html>
<head>
<title>RxJS Tutorial</title>
<!-- Load CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />
<!-- Load Rubik font -->
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<!-- Add Custom inline CSS -->
<style>
body {
background-color: #f5f5f5;
font-family: "Rubik", sans-serif;
}
.search-container {
margin-top: 50px;
}
.search-container .search-heading {
display: block;
margin-bottom: 50px;
}
.search-container input,
.search-container input:focus {
padding: 16px 16px 16px;
border: none;
background: rgb(255, 255, 255);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1) !important;
}
.results-container {
margin-top: 50px;
}
.results-container .list-group .list-group-item {
background-color: transparent;
border-top: none !important;
border-bottom: 1px solid rgba(236, 229, 229, 0.64);
}
.float-bottom-right {
position: fixed;
bottom: 20px;
left: 20px;
font-size: 20px;
font-weight: 700;
z-index: 1000;
}
.float-bottom-right .info-container .card {
display: none;
}
.float-bottom-right .info-container:hover .card,
.float-bottom-right .info-container .card:hover {
display: block;
}
</style>
</head>
<body>
<!-- Content -->
<!-- Page Header and Search Bar -->
<div class="container search-container">
<div class="row justify-content-center">
<div class="col-md-auto">
<div class="search-heading">
<h2>Search for Materials Published by Author Name</h2>
<p class="text-right">powered by <a href="https://www.crossref.org/">Crossref</a></p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-8">
<div class="input-group input-group-md">
<input id="search-input" type="text" class="form-control" placeholder="eg. Richard" aria-label="eg. Richard" autofocus>
</div>
</div>
</div>
</div>
<!-- Results -->
<div class="container results-container">
<div class="row justify-content-center">
<div class="col-sm-8">
<ul id="response-list" class="list-group list-group-flush"></ul>
</div>
</div>
</div>
<!-- Load external RxJS -->
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
<!-- Add custom inline JavaScript -->
<script>
const output = document.getElementById("response-list"); // grab the response div
function showResults(resp) {
var items = resp['message']['items']
output.innerHTML = ""; // Clear the contents first
animationDelay = 0; // Pick a starting value for animation delay
if (items.length == 0) { // We check if we have any results
output.innerHTML = "Could not find any :("; // If there were no results we update the response
} else {
items.forEach(item => { // We loop through the results
resultItem = `
<div class="list-group-item animated fadeInUp" style="animation-delay: ${animationDelay}s;">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">${item.title[0]}</h5>
</div>
<p class="mb-1">${(item['container-title'] && item['container-title'][0]) || ""}</p>
<small class="text-muted"><a href="${item['URL']}" target="_blank">${item['URL']}</a></small>
<div>
<p class="badge badge-primary badge-pill">${item['publisher'] || ''}</p>
<p class="badge badge-primary badge-pill">${item['type'] || ''}</p>
</div>
</div>
`;
output.insertAdjacentHTML("beforeend", resultItem); // The markup for the result is then added
animationDelay += 0.1; // We increase the animation delay so that the next elements starts with
// to the results block the animation a little later
});
}
}
// =======================================================================================
// =======================================================================================
// ====================================== Edit Here ======================================
// =======================================================================================
// ========================================= End =========================================
// let searchInput = document.getElementById("search-input");
// Rx.Observable.fromEvent(searchInput, 'input')
// .pluck('target', 'value')
// .filter(searchTerm => searchTerm.length > 2)
// .debounceTime(500)
// .distinctUntilChanged()
// .switchMap(searchKey => Rx.Observable.ajax(`https://api.crossref.org/works?rows=50&query.author=${searchKey}`)
// .map(resp => ({
// "status" : resp["status"] == 200,
// "details" : resp["status"] == 200 ? resp["response"] : [],
// "result_hash": Date.now()
// })
// )
// )
// .filter(resp => resp.status !== false)
// .distinctUntilKeyChanged('response_hash')
// .subscribe(resp => showResults(resp.details));
</script>
</body>
</html>
Raw
rxjs-search-bar-pokemon.html
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>RxJS Tutorial</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />
<style>
body {
background-color: #f5f5f5;
font-family: 'Rubik', sans-serif;
}
.search-container {
margin-top: 50px;
}
.search-container .search-heading {
display: block;
margin-bottom: 15px;
}
.search-container input {
padding: 16px 16px 16px;
border: none;
background: rgb(255, 255, 255);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1) !important;
}
input:focus {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1) !important;
}
.results-container {
margin-top: 50px;
}
.results-container .list-group .list-group-item {
background-color: transparent;
border-top: none !important;
border-bottom: 1px solid rgba(236, 229, 229, 0.64);
}
.float-bottom-right {
position: absolute;
bottom: 20px;
left: 20px;
font-size: 20px;
font-weight: 700;
}
.float-bottom-right .info-container .card{
display: none;
}
.float-bottom-right .info-container:hover .card {
display: block;
}
.float-bottom-right .info-container .card:hover {
display: block;
}
</style>
</head>
<body>
<div class="float-bottom-right">
<span class="info-container">
<div class="card animate fadeIn" style="max-width: 350px;">
<div class="card-body">
<h5 class="card-title">Demo for <strong>Getting Started with RxJS by Building a Search Bar</strong></h5>
<!-- <p class="card-title">Designed and developed by <a href="https://mayankraj.com">Mayank Raj</a> for <a href="https://www.digitalocean.com/community">DO Community</a></p> -->
<h6 class="card-subtitle mb-2 text-muted">Designed and developed by <a href="https://mayankraj.com">Mayank
Raj</a> for <a href="https://www.digitalocean.com/community">DO Community</a></h6>
<a href="#" class="card-link"><small>Go to Tutorial</small></a>
</div>
</div>
ⓘ
</span>
</div>
<div class="container search-container">
<div class="row justify-content-center">
<div class="col-md-auto">
<div class="search-heading">
<h2>Search for Pokemon Cards</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-8">
<div class="input-group input-group-md">
<input type="text" class="form-control" placeholder="eg. Basset Brewery" aria-label="eg. Basset Brewery"
autofocus>
</div>
</div>
</div>
</div>
<div class="container results-container">
<div class="row justify-content-center">
<div class="col-sm-8">
<div id="response-list"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
<script>
console.clear();
const input = document.querySelector("input");
const output = document.getElementById("response-list");
function showResults(resp) {
let cards = resp["cards"];
console.log(cards);
output.innerHTML = "";
resultItems = "";
animationDelay = 0;
cards.forEach(card => {
resultItem = `
<div class="row animated fadeInUp card-row" style="animation-delay: ${animationDelay}s;">
<div class="col-md-6 img">
<img src="${card.imageUrl || ''}" class="img-rounded">
</div>
<div class="col-md-6 details">
<blockquote>
<h5>${card.name}</h5>
<small>Designed by : <strong>${card.artist || ''}</strong></small>
</blockquote>
<p>
HP: ${card.hp} <br>
Rarity: ${card.rarity}
</p>
</div>
</div>
`;
output.insertAdjacentHTML("beforeend", resultItem);
animationDelay += 0.1;
});
if (cards.length == 0) {
output.innerHTML = "Could not find any :(";
}
}
// =======================================================================================
// =======================================================================================
// ====================================== Edit Here ======================================
// =======================================================================================
// ========================================= End =========================================
// let searchInput = document.querySelector("input");
// Rx.Observable.fromEvent(searchInput, "input")
// .pluck("target", "value")
// .filter(searchTerm => searchTerm.length > 2)
// .debounceTime(500)
// .distinctUntilChanged()
// .switchMap(searchKey =>
// Rx.Observable.ajax(
// `https://api.pokemontcg.io/v1/cards?name=${searchKey}`
// ).map(resp => ({
// response_hash: Date.now(),
// status: resp["status"] == 200,
// details: resp["status"] == 200 ? resp["response"] : []
// }))
// )
// .filter(resp => resp.status !== false)
// .distinctUntilKeyChanged("response_hash")
// .subscribe(resp => showResults(resp.details));
</script>
</body>
</html>
Raw
rxjs-search-bar-public-breweries.html
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>RxJS Tutorial</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />
<style>
body {
background-color: #f5f5f5;
font-family: 'Rubik', sans-serif;
}
.search-container {
margin-top: 50px;
}
.search-container .search-heading {
display: block;
margin-bottom: 15px;
}
.search-container input {
padding: 16px 16px 16px;
border: none;
background: rgb(255, 255, 255);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1) !important;
}
input:focus {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1) !important;
}
.results-container {
margin-top: 50px;
}
.results-container .list-group .list-group-item {
background-color: transparent;
border-top: none !important;
border-bottom: 1px solid rgba(236, 229, 229, 0.64);
}
.float-bottom-right {
position: absolute;
bottom: 20px;
left: 20px;
font-size: 20px;
font-weight: 700;
}
.float-bottom-right .info-container .card{
display: none;
}
.float-bottom-right .info-container:hover .card {
display: block;
}
.float-bottom-right .info-container .card:hover {
display: block;
}
</style>
</head>
<body>
<div class="float-bottom-right">
<span class="info-container">
<div class="card animate fadeIn" style="max-width: 350px;">
<div class="card-body">
<h5 class="card-title">Demo for <strong>Getting Started with RxJS by Building a Search Bar</strong></h5>
<!-- <p class="card-title">Designed and developed by <a href="https://mayankraj.com">Mayank Raj</a> for <a href="https://www.digitalocean.com/community">DO Community</a></p> -->
<h6 class="card-subtitle mb-2 text-muted">Designed and developed by <a href="https://mayankraj.com">Mayank
Raj</a> for <a href="https://www.digitalocean.com/community">DO Community</a></h6>
<a href="#" class="card-link"><small>Go to Tutorial</small></a>
</div>
</div>
ⓘ
</span>
</div>
<div class="container search-container">
<div class="row justify-content-center">
<div class="col-md-auto">
<div class="search-heading">
<h2>Search for Breweries around the world...</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-8">
<div class="input-group input-group-md">
<input type="text" class="form-control" placeholder="eg. Basset Brewery" aria-label="eg. Basset Brewery"
autofocus>
</div>
</div>
</div>
</div>
<div class="container results-container">
<div class="row justify-content-center">
<div class="col-sm-8">
<ul id="response-list" class="list-group list-group-flush"></ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
<script>
const output = document.getElementById("response-list");
function showResults(resp) {
output.innerHTML = ''
resultItems = '';
animationDelay = 0
resp.forEach(brewery => {
resultItem =
`
<div class="list-group-item animated fadeInUp" style="animation-delay: ${animationDelay}s;">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">${brewery.name}</h5>
<small>${brewery.state || ''}</small>
</div>
<small><a href="${brewery.website_url}" target="_blank">${brewery.website_url}</a></small>
</div>
`
output.insertAdjacentHTML('beforeend', resultItem)
animationDelay += 0.1
})
if (resp.length == 0) {
output.innerHTML = "Could not find any :(";
}
}
// =======================================================================================
// =======================================================================================
// ====================================== Edit Here ======================================
// =======================================================================================
// ========================================= End =========================================
// let searchInput = document.querySelector('input');
// Rx.Observable.fromEvent(searchInput, 'input')
// .pluck('target', 'value')
// .filter(searchTerm => searchTerm.length > 2)
// .debounceTime(500)
// .distinctUntilChanged()
// .switchMap(
// (searchKey) => Rx.Observable.ajax(`https://api.openbrewerydb.org/breweries?by_name=${searchKey}`)
// .map(resp => ({
// "response_hash": Date.now(),
// "status": resp["status"] == 200,
// "details": resp["status"] == 200 ? resp["response"] : []
// }))
// )
// .filter(resp => resp.status !== false)
// .distinctUntilKeyChanged('response_hash')
// .subscribe(resp => showResults(resp.details));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment