Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 7, 2017 18:39
Show Gist options
  • Save anonymous/ec80705fba8bb616bed2240eed97b2bc to your computer and use it in GitHub Desktop.
Save anonymous/ec80705fba8bb616bed2240eed97b2bc to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/limapuqala
Raw
index.html
<!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>
Raw
jsbin.limapuqala.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;
}
Raw
jsbin.limapuqala.js
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