Skip to content

Instantly share code, notes, and snippets.

@willywos

willywos/gist:8de45f3033af840d88a0

Created March 4, 2015 14:34
Show Gist options
  • Save willywos/8de45f3033af840d88a0 to your computer and use it in GitHub Desktop.
Save willywos/8de45f3033af840d88a0 to your computer and use it in GitHub Desktop.
Download ZIP
dug.js example
Raw
gistfile1.txt
<html>
<head>
<title>dug.js - Retriever dropdown</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/fd-slider-tooltip.css">
<link rel="stylesheet" href="css/fd-slider.css">
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
<link rel="stylesheet" href="css/dug.css">
<script src="javascript/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="javascript/fd-slider.js"></script>
<script src="javascript/dug.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2>dug.js <small></small></h2>
<a href="test.html">Wanna run some tests?</a>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<div class="search"></div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".search").dug({
items: [
{
"id":1,
"label": "Ruby",
"category_id":1,
"category_label":"Programming",
"description":"A dynamic, open source programming language with a focus on simplicity and productivity."
},
{
"id":2,
"label": "Rails",
"category_id":2,
"category_label":"Programming Framework",
"description":"Ruby on Rails® is an open-source web framework that’s optimized for programmer happiness and sustainable productivity. "
},
{
"id":3,
"label": "JavaScript",
"category_id":1,
"category_label":"Programming",
"description":"JavaScript (/ˈdʒɑːvəˌskrɪpt/; JS) is a dynamic computer programming language.[5] "
},
{
"id":4,
"label":"Ember.js",
"category_id":2,
"category_label":"Programming Framework",
"description":"Ember.js is a JavaScript framework that does all of the heavy lifting that you'd normally have to do by hand. "
},
{
"id":5,
"label": "English Language",
"category_id":3,
"category_label":"Communication",
"description":""
},
{
"id":6,
"label": "Lead Generation",
"category_id":4,
"category_label":"Sales",
"description":""
}],
itemOnClick: function(item) {
console.log("Adding Item:" + item.id + ":" + item.label);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment