Skip to content

Instantly share code, notes, and snippets.

@oskarrough

oskarrough/index.html

Last active May 5, 2017 09:19
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 oskarrough/92c312cc17f50974f09294b16c4000d7 to your computer and use it in GitHub Desktop.
Save oskarrough/92c312cc17f50974f09294b16c4000d7 to your computer and use it in GitHub Desktop.
Download ZIP
Native autocomplete for Radio4000 channels (source https://jsbin.com/daruqo)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="native autocomplete with ajax">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Radio4000 autocomplete</title>
<style id="jsbin-css">
input {
padding: 0.5em;
}
</style>
</head>
<body>
<p>What is the name of your Radio4000?</p>
<input id="radio4000-autocomplete" list="radio4000-channels">
<datalist id="radio4000-channels"></datalist>
<script id="jsbin-javascript">
// Get the <datalist> and <input> elements.
var dataList = document.getElementById('radio4000-channels')
var input = document.getElementById('radio4000-autocomplete')
// Update the placeholder text.
input.placeholder = "Loading radios..."
function afterModel(channels) {
channels.forEach(function(channel) {
var option = document.createElement('option')
option.value = channel.title
option['data-slug'] = channel.slug
dataList.appendChild(option)
});
// Update the placeholder text.
input.placeholder = 'e.g. "Radio Superman"'
}
fetch('https://api.radio4000.com/v1/channels')
.then(res => res.json())
.then(data => afterModel(data))
.catch(err => {
console.log(err)
})
</script>
<script id="jsbin-source-css" type="text/css">input {
padding: 0.5em;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// Get the <datalist> and <input> elements.
var dataList = document.getElementById('radio4000-channels')
var input = document.getElementById('radio4000-autocomplete')
// Update the placeholder text.
input.placeholder = "Loading radios..."
function afterModel(channels) {
channels.forEach(function(channel) {
var option = document.createElement('option')
option.value = channel.title
option['data-slug'] = channel.slug
dataList.appendChild(option)
});
// Update the placeholder text.
input.placeholder = 'e.g. "Radio Superman"'
}
fetch('https://api.radio4000.com/v1/channels')
.then(res => res.json())
.then(data => afterModel(data))
.catch(err => {
console.log(err)
})</script></body>
</html>
Raw
jsbin.daruqo.css
input {
padding: 0.5em;
}
Raw
jsbin.daruqo.js
// Get the <datalist> and <input> elements.
var dataList = document.getElementById('radio4000-channels')
var input = document.getElementById('radio4000-autocomplete')
// Update the placeholder text.
input.placeholder = "Loading radios..."
function afterModel(channels) {
channels.forEach(function(channel) {
var option = document.createElement('option')
option.value = channel.title
option['data-slug'] = channel.slug
dataList.appendChild(option)
});
// Update the placeholder text.
input.placeholder = 'e.g. "Radio Superman"'
}
fetch('https://api.radio4000.com/v1/channels')
.then(res => res.json())
.then(data => afterModel(data))
.catch(err => {
console.log(err)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment