Skip to content

Instantly share code, notes, and snippets.

@khanhlu2013

khanhlu2013/index.html

Created March 31, 2017 00:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save khanhlu2013/6a1888e1aaeae78bcdbfa26cf6eaf38e to your computer and use it in GitHub Desktop.
Save khanhlu2013/6a1888e1aaeae78bcdbfa26cf6eaf38e to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin auto fill example using rxjs 5 // source https://jsbin.com/yicokan
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="auto fill example using rxjs 5">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
<input id="input"/>
<script id="jsbin-javascript">
console.clear();
let DATA = [
'a1~',
'a1!',
'a1@',
'a2~',
'a2!',
'a2@'
]
function getData(searchStr){
let result = [];
searchStr = searchStr.trim();
if(searchStr.length!=0){
result = DATA.filter((item) => item.includes(searchStr));
}
return Rx.Observable.of(result);
}
function updateUi(lst){
console.clear();
lst.forEach((item)=> console.log(item));
}
var inputEl = document.getElementById('input');
let keyupStream = Rx.Observable.fromEvent(inputEl,'keyup');
let resultStream = keyupStream
.switchMap((event)=>{
var searchStr = inputEl.value;
return getData(searchStr);
});
resultStream.forEach((lst)=> updateUi(lst));
</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear();
let DATA = [
'a1~',
'a1!',
'a1@',
'a2~',
'a2!',
'a2@'
]
function getData(searchStr){
let result = [];
searchStr = searchStr.trim();
if(searchStr.length!=0){
result = DATA.filter((item) => item.includes(searchStr));
}
return Rx.Observable.of(result);
}
function updateUi(lst){
console.clear();
lst.forEach((item)=> console.log(item));
}
var inputEl = document.getElementById('input');
let keyupStream = Rx.Observable.fromEvent(inputEl,'keyup');
let resultStream = keyupStream
.switchMap((event)=>{
var searchStr = inputEl.value;
return getData(searchStr);
});
resultStream.forEach((lst)=> updateUi(lst));
</script></body>
</html>
Raw
jsbin.yicokan.js
console.clear();
let DATA = [
'a1~',
'a1!',
'a1@',
'a2~',
'a2!',
'a2@'
]
function getData(searchStr){
let result = [];
searchStr = searchStr.trim();
if(searchStr.length!=0){
result = DATA.filter((item) => item.includes(searchStr));
}
return Rx.Observable.of(result);
}
function updateUi(lst){
console.clear();
lst.forEach((item)=> console.log(item));
}
var inputEl = document.getElementById('input');
let keyupStream = Rx.Observable.fromEvent(inputEl,'keyup');
let resultStream = keyupStream
.switchMap((event)=>{
var searchStr = inputEl.value;
return getData(searchStr);
});
resultStream.forEach((lst)=> updateUi(lst));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment