Skip to content

Instantly share code, notes, and snippets.

@railsstudent

railsstudent/SearchWikipedia.html

Last active June 4, 2017 02:46
Show Gist options
  • Save railsstudent/f1a37f4fab95f82958ecdbd4ec578a07 to your computer and use it in GitHub Desktop.
Save railsstudent/f1a37f4fab95f82958ecdbd4ec578a07 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
SearchWikipedia.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/detectizr/1.5.0/detectizr.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular-resource/master/angular-resource.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="button" id="searchButton" value="Search" />
<br/>
<div id="searchForm" style="background-color:blue;display:none">
<br />
<input type="text" id="textbox">
<br/><br/>
<textarea id="results" rows="10" cols="30"></textarea>
<hr />;
<input type="button" id="closeButton" value="Close" />
</div>
<script id="jsbin-javascript">
"use strict";
var Observable = Rx.Observable;
var textbox = document.getElementById("textbox");
var textArea = document.getElementById("results");
var keypresses = Observable.fromEvent(textbox, 'keypress');
keypresses.forEach(function (x) {
var code = x.keyCode || x.which;
var ch = String.fromCharCode(code);
//console.log({ code: ch });
});
var searchWikipedia = function searchWikipedia(term) {
var encodeTerm = encodeURIComponent(term);
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + encodeTerm + "&callback=?";
$.getJSON(url, function (data) {
console.log(data[1]);
});
};
//searchWikipedia('Terminator');
// return an observable object
function getWikipediaSearchResults(term) {
return Observable.create(function forEach(observer) {
var cancelled = false;
var encodeTerm = encodeURIComponent(term);
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + encodeTerm + "&callback=?";
$.getJSON(url, function (data) {
observer.onNext(data[1]);
observer.onCompleted();
}); // getJSON
return function dispose() {
cancelled = true;
}; // dispose
});
}
// getWikipediaSearchResults('Terminiator').forEach((result) => {
// console.log(result);
// })
// create search button cl ick observable
var searchButton = document.getElementById("searchButton");
var searchButtonClick = Observable.fromEvent(searchButton, "click");
var searchForm = document.getElementById("searchForm");
// use doAction to perform side-effect
// searchButtonClick.forEach((click) => {
// searchForm.style.display = "block";
// });
// when someone calls this observable, do this action
var searchFormOpens = searchButtonClick.doAction(function onNext() {
searchForm.style.display = "block";
// clear text area
});
// make an sutocomplete box
var searchResults =
// only subscribe to keypress when search is clicked
searchFormOpens.map(function () {
var closeButton = document.getElementById("closeButton");
var closeButtonClick = Observable.fromEvent(closeButton, "click");
// close search form when close button observable is clicked
var searchFormCloses = closeButtonClick.doAction(function onNext() {
searchForm.style.display = "none";
textbox.value = "";
textArea.value = "";
});
return keypresses.
// {a..b.......c...d....}
throttle(20).
// {...b...........d...}
map(function (key) {
return textbox.value;
}).
// {...'ab'...'ab'....'abcd'....}
distinctUntilChanged().
// {...'ab'...........'abcd'....}
map(function (search) {
return getWikipediaSearchResults(search);
})["switch"]().
// return latest result
// { [cdefghh ] }
takeUntil(searchFormCloses); // 1-dimensional array
// stop keypress observable when close button is clicked
})["switch"]();
searchResults.forEach(function (resultSet) {
textArea.value = JSON.stringify(resultSet);
}, function (error) {
alert('error occurs');
});
// {...['abcde', 'dddd']....['cdefghh']...}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var Observable = Rx.Observable;
var textbox = document.getElementById("textbox");
var textArea = document.getElementById("results");
var keypresses = Observable.fromEvent(textbox, 'keypress');
keypresses.forEach((x) => {
var code = x.keyCode || x.which;
var ch = String.fromCharCode(code);
//console.log({ code: ch });
})
var searchWikipedia = (term) => {
const encodeTerm = encodeURIComponent(term);
const url = `https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=${encodeTerm}&callback=?`;
$.getJSON(url,(data) => {
console.log(data[1]);
});
};
//searchWikipedia('Terminator');
// return an observable object
function getWikipediaSearchResults(term) {
return Observable.create(function forEach(observer) {
let cancelled = false;
const encodeTerm = encodeURIComponent(term);
const url = `https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=${encodeTerm}&callback=?`;
$.getJSON(url,(data) => {
observer.onNext(data[1]);
observer.onCompleted();
}); // getJSON
return function dispose() {
cancelled = true;
}; // dispose
});
}
// getWikipediaSearchResults('Terminiator').forEach((result) => {
// console.log(result);
// })
// create search button cl ick observable
var searchButton = document.getElementById("searchButton");
var searchButtonClick = Observable.fromEvent(searchButton, "click");
var searchForm = document.getElementById("searchForm");
// use doAction to perform side-effect
// searchButtonClick.forEach((click) => {
// searchForm.style.display = "block";
// });
// when someone calls this observable, do this action
var searchFormOpens = searchButtonClick.
doAction(function onNext() {
searchForm.style.display = "block";
// clear text area
});
// make an sutocomplete box
var searchResults =
// only subscribe to keypress when search is clicked
searchFormOpens.
map(function() {
var closeButton = document.getElementById("closeButton");
var closeButtonClick = Observable.fromEvent(closeButton, "click");
// close search form when close button observable is clicked
var searchFormCloses = closeButtonClick.
doAction(function onNext() {
searchForm.style.display = "none";
textbox.value = "";
textArea.value = "";
});
return keypresses.
// {a..b.......c...d....}
throttle(20).
// {...b...........d...}
map((key) => {
return textbox.value
}).
// {...'ab'...'ab'....'abcd'....}
distinctUntilChanged().
// {...'ab'...........'abcd'....}
map((search) => {
return getWikipediaSearchResults(search);
}).
// {...['abcde', 'dddd']....['cdefghh']...}
switch().
// return latest result
// { [cdefghh ] }
takeUntil(searchFormCloses); // 1-dimensional array
// stop keypress observable when close button is clicked
}).switch();
searchResults.forEach((resultSet) => {
textArea.value = JSON.stringify(resultSet);
}, (error) => {
alert('error occurs');
});
</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment