Created
August 7, 2017 18:39
-
-
Save anonymous/ec80705fba8bb616bed2240eed97b2bc to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/limapuqala
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
input { | |
background: white; | |
border: solid 1px #666; | |
outline: none; | |
padding: 4px; | |
} | |
input:focus { | |
border: solid 1px blue; | |
} | |
.mentions { | |
background: white; | |
border: solid 1px #ddd; | |
margin: 0; | |
padding: 0; | |
width: 300px; | |
height: 400px; | |
overflow-y: auto; | |
visibility: hidden; | |
} | |
.mentions li { | |
border-top: solid 1px #ddd; | |
display: block; | |
margin: 0; | |
padding: 0 10px; | |
width: 80%; | |
line-height: 40px; | |
height: 40px; | |
overflow: hidden; | |
} | |
.mentions:firstChild { | |
border-top: none; | |
} | |
</style> | |
</head> | |
<body> | |
<input id="comments" /> | |
<ul id="mentionsContainer" class="mentions"></ul> | |
<script id="jsbin-javascript"> | |
const mentions = [ | |
'Al Dufresne', | |
'Vella Trent', | |
'Yolande Casimir', | |
'Shavonda Hilgendorf', | |
'Jamaal Sumner', | |
'Alex Tetterton', | |
'Adria Shedd', | |
'Lindsay Legree', | |
'Karey Hedgepeth', | |
'Rey Vannest', | |
'Tula Nemitz', | |
'Quiana Presgraves', | |
'Merle Carbaugh', | |
'Matt Mckillip', | |
'Heike Leak', | |
'Leslie Rauch', | |
'Winifred Rochester', | |
'Maurine Capra', | |
'Marty Sabo', | |
'Dinorah Colon', | |
'Meta Jobe', | |
'Jc Stott', | |
'Lauran Grange', | |
'Kattie Peil', | |
'Sandie Eure', | |
'Stella Steed', | |
'Rubie Thorson', | |
'Cindi Nemeth', | |
'Sau Hollister', | |
'Javier Farquhar', | |
'Laura Uriarte', | |
'Terrance Toal', | |
'Reagan Masten', | |
'Candra Peterka', | |
'Tran Dawn', | |
'Catherin Brase', | |
'Christina Toner', | |
'Lloyd Fury', | |
'Kathlyn Trueman', | |
'Treena Blowers', | |
'Gilbert Yochum', | |
'Kimber Baden', | |
'Spring Fermin', | |
'Errol Hovey', | |
'Iraida Rawles', | |
'Lance Ertl', | |
'Aida Hawes', | |
'Latasha Jeffries', | |
'Na Bibbins', | |
'Flor Devane' | |
] | |
const comments = document.getElementById('comments') | |
const mentionsContainer = document.getElementById('mentionsContainer') | |
const atIndex = (str) => str.indexOf('@') | |
const getAtMention = (str) => { | |
const at = atIndex(str) | |
return str.substr(at + 1) | |
} | |
const getMatches = (userInput) => (txtToMatch) => { | |
// get @ metion from user input | |
const exp = getAtMention(userInput) | |
const regex = new RegExp(exp, 'gi') | |
return txtToMatch.match(regex) | |
} | |
comments.addEventListener('keyup', evt => { | |
// get user input | |
const userInput = evt.target.value | |
if (userInput.indexOf('@') === -1) { | |
return mentionsContainer.style.visibility = 'hidden' | |
} | |
// display @ mentions | |
mentionsContainer.style.visibility = 'visible' | |
// check against list | |
const matchFilter = getMatches(userInput) | |
const matches = mentions.filter(matchFilter) | |
// updates mentions | |
const matchedResults = matches.length > 0 ? matches : mentions | |
const content = matchedResults.map(c => `<li>${c}</li>`).join('') | |
mentionsContainer.innerHTML = content | |
}) | |
</script> | |
<script id="jsbin-source-css" type="text/css">input { | |
background: white; | |
border: solid 1px #666; | |
outline: none; | |
padding: 4px; | |
} | |
input:focus { | |
border: solid 1px blue; | |
} | |
.mentions { | |
background: white; | |
border: solid 1px #ddd; | |
margin: 0; | |
padding: 0; | |
width: 300px; | |
height: 400px; | |
overflow-y: auto; | |
visibility: hidden; | |
} | |
.mentions li { | |
border-top: solid 1px #ddd; | |
display: block; | |
margin: 0; | |
padding: 0 10px; | |
width: 80%; | |
line-height: 40px; | |
height: 40px; | |
overflow: hidden; | |
} | |
.mentions:firstChild { | |
border-top: none; | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">const mentions = [ | |
'Al Dufresne', | |
'Vella Trent', | |
'Yolande Casimir', | |
'Shavonda Hilgendorf', | |
'Jamaal Sumner', | |
'Alex Tetterton', | |
'Adria Shedd', | |
'Lindsay Legree', | |
'Karey Hedgepeth', | |
'Rey Vannest', | |
'Tula Nemitz', | |
'Quiana Presgraves', | |
'Merle Carbaugh', | |
'Matt Mckillip', | |
'Heike Leak', | |
'Leslie Rauch', | |
'Winifred Rochester', | |
'Maurine Capra', | |
'Marty Sabo', | |
'Dinorah Colon', | |
'Meta Jobe', | |
'Jc Stott', | |
'Lauran Grange', | |
'Kattie Peil', | |
'Sandie Eure', | |
'Stella Steed', | |
'Rubie Thorson', | |
'Cindi Nemeth', | |
'Sau Hollister', | |
'Javier Farquhar', | |
'Laura Uriarte', | |
'Terrance Toal', | |
'Reagan Masten', | |
'Candra Peterka', | |
'Tran Dawn', | |
'Catherin Brase', | |
'Christina Toner', | |
'Lloyd Fury', | |
'Kathlyn Trueman', | |
'Treena Blowers', | |
'Gilbert Yochum', | |
'Kimber Baden', | |
'Spring Fermin', | |
'Errol Hovey', | |
'Iraida Rawles', | |
'Lance Ertl', | |
'Aida Hawes', | |
'Latasha Jeffries', | |
'Na Bibbins', | |
'Flor Devane' | |
] | |
const comments = document.getElementById('comments') | |
const mentionsContainer = document.getElementById('mentionsContainer') | |
const atIndex = (str) => str.indexOf('@') | |
const getAtMention = (str) => { | |
const at = atIndex(str) | |
return str.substr(at + 1) | |
} | |
const getMatches = (userInput) => (txtToMatch) => { | |
// get @ metion from user input | |
const exp = getAtMention(userInput) | |
const regex = new RegExp(exp, 'gi') | |
return txtToMatch.match(regex) | |
} | |
comments.addEventListener('keyup', evt => { | |
// get user input | |
const userInput = evt.target.value | |
if (userInput.indexOf('@') === -1) { | |
return mentionsContainer.style.visibility = 'hidden' | |
} | |
// display @ mentions | |
mentionsContainer.style.visibility = 'visible' | |
// check against list | |
const matchFilter = getMatches(userInput) | |
const matches = mentions.filter(matchFilter) | |
// updates mentions | |
const matchedResults = matches.length > 0 ? matches : mentions | |
const content = matchedResults.map(c => `<li>${c}</li>`).join('') | |
mentionsContainer.innerHTML = content | |
})</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
input { | |
background: white; | |
border: solid 1px #666; | |
outline: none; | |
padding: 4px; | |
} | |
input:focus { | |
border: solid 1px blue; | |
} | |
.mentions { | |
background: white; | |
border: solid 1px #ddd; | |
margin: 0; | |
padding: 0; | |
width: 300px; | |
height: 400px; | |
overflow-y: auto; | |
visibility: hidden; | |
} | |
.mentions li { | |
border-top: solid 1px #ddd; | |
display: block; | |
margin: 0; | |
padding: 0 10px; | |
width: 80%; | |
line-height: 40px; | |
height: 40px; | |
overflow: hidden; | |
} | |
.mentions:firstChild { | |
border-top: none; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const mentions = [ | |
'Al Dufresne', | |
'Vella Trent', | |
'Yolande Casimir', | |
'Shavonda Hilgendorf', | |
'Jamaal Sumner', | |
'Alex Tetterton', | |
'Adria Shedd', | |
'Lindsay Legree', | |
'Karey Hedgepeth', | |
'Rey Vannest', | |
'Tula Nemitz', | |
'Quiana Presgraves', | |
'Merle Carbaugh', | |
'Matt Mckillip', | |
'Heike Leak', | |
'Leslie Rauch', | |
'Winifred Rochester', | |
'Maurine Capra', | |
'Marty Sabo', | |
'Dinorah Colon', | |
'Meta Jobe', | |
'Jc Stott', | |
'Lauran Grange', | |
'Kattie Peil', | |
'Sandie Eure', | |
'Stella Steed', | |
'Rubie Thorson', | |
'Cindi Nemeth', | |
'Sau Hollister', | |
'Javier Farquhar', | |
'Laura Uriarte', | |
'Terrance Toal', | |
'Reagan Masten', | |
'Candra Peterka', | |
'Tran Dawn', | |
'Catherin Brase', | |
'Christina Toner', | |
'Lloyd Fury', | |
'Kathlyn Trueman', | |
'Treena Blowers', | |
'Gilbert Yochum', | |
'Kimber Baden', | |
'Spring Fermin', | |
'Errol Hovey', | |
'Iraida Rawles', | |
'Lance Ertl', | |
'Aida Hawes', | |
'Latasha Jeffries', | |
'Na Bibbins', | |
'Flor Devane' | |
] | |
const comments = document.getElementById('comments') | |
const mentionsContainer = document.getElementById('mentionsContainer') | |
const atIndex = (str) => str.indexOf('@') | |
const getAtMention = (str) => { | |
const at = atIndex(str) | |
return str.substr(at + 1) | |
} | |
const getMatches = (userInput) => (txtToMatch) => { | |
// get @ metion from user input | |
const exp = getAtMention(userInput) | |
const regex = new RegExp(exp, 'gi') | |
return txtToMatch.match(regex) | |
} | |
comments.addEventListener('keyup', evt => { | |
// get user input | |
const userInput = evt.target.value | |
if (userInput.indexOf('@') === -1) { | |
return mentionsContainer.style.visibility = 'hidden' | |
} | |
// display @ mentions | |
mentionsContainer.style.visibility = 'visible' | |
// check against list | |
const matchFilter = getMatches(userInput) | |
const matches = mentions.filter(matchFilter) | |
// updates mentions | |
const matchedResults = matches.length > 0 ? matches : mentions | |
const content = matchedResults.map(c => `<li>${c}</li>`).join('') | |
mentionsContainer.innerHTML = content | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment