Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="http://lungo.tapquo.com/demo/components/lungo/lungo.css" rel="stylesheet" type="text/css" />
<link href="http://lungo.tapquo.com/demo/components/lungo/lungo.theme.css" rel="stylesheet" type="text/css" />
<link href="http://lungo.tapquo.com/demo/components/lungo/lungo.icon.css" rel="stylesheet" type="text/css" />
<script src="http://lungo.tapquo.com/demo/components/quojs/quo.js"></script>
<script src="http://lungo.tapquo.com/demo/components/lungo/lungo.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
</style>
</head>
<body>
  <p> from JS Bin</p>
  <p id="hello"></p>
</body>
</html>
 
// scribble for a simple menu widget, used by other widgets, in this case, autocomplete 
​
var input = $("input.autocomplete");
var options = { minLength: 1, source: function() {} };
​
function buildList(content) {
  var ul = $("<ul/>").addClass("autocompletemenu");
  $.each(content, function(item) {
    $("<li/>").data("item.autocomplete", item).text(item.label).appendTo(ul);
  });
  return ul;
}
​
function response(content) {
  // remove previous menu
  $(".autocompletemenu").remove();
  // build a new one
  buildList(content).appendTo(document.body).menu({
    select: function(event, ui) {
      input.val( ui.item.data("item.autocomplete").result );
    }
  }).position({
    my: "left top",
    at: "left bottom",
    of: input
  });
};
​
input.bind("keyup", function() {
  if (this.value.length > options.minLength) {
    var result = options.source({ term: this.value }, response);
    if (result)
      response(result);
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers