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>
<html>
​
<head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
  <link href="//extjs.cachefly.net/ext-3.1.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="https://unpkg.com/blaze/dist/blaze.min.css" rel="stylesheet" type="text/css" />
<link href="https://unpkg.com/blaze/dist/blaze.colors.min.css" rel="stylesheet" type="text/css" />
      <link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <title>JS Bin</title>
  <style type="text/css">
    div#content div {
            display: inline-block;
            padding: 10px;
            border: 1px solid black;
        }
        
        .ui-widget.ui-autocomplete {
            max-height: 190px;
            overflow: auto;
            z-index: 29;
        }
        
        li {
            list-style: none outside none;
            padding: 0 0 3px 20px;
        }
        
        input,
        span {
            outline: none;
        }
        
        html {
            font-size: 14px;
            font-size: calc(.775rem - -.25 *(100vw - 20rem) / 100);
        }
        
        body {
            font-family: "ProximaNovaRegular", sans-serif;
            color: #111;
            background-color: #fff;
            margin: 0 auto;
            padding: 0;
            text-rendering: optimizeLegibility;
        }
        
        select,
        input,
        form,
        textarea,
        pre {
            font-family: "ProximaNovaRegular", sans-serif;
            margin: 0;
            padding: 0;
            font-size: 1rem;
        }
  </style>
    <script type="text/javascript">
    </script>
    <script type="text/javascript">
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
​
​
        function populateContent() {
​
            var cont = $("#content");
​
            for (var i = 0; i < 10000; i++) {
​
                var dd = $("<div>");
​
                dd.html("Welcome");
​
                cont.append(dd);
​
            }
​
        }
​
        function createAutoComplete() {
​
            var container = $("#container");
​
            for (var i = 0; i < 500; i++) {
​
                var inp = $("<li><input type='text'></li>");
​
                container.append(inp);
​
                $(inp.find("input")).autocomplete({
                    source: availableTags
                });
            }
        }
​
        function destroyAutoCompleteEmpty() {
​
            $("#container").empty();
        }
​
        function destroyAutoCompleteSingle() {
​
            var autoCompleteDivs = $("#container").find(".ui-autocomplete-input");
            var len = autoCompleteDivs.length;
​
            for (var i = 0; i < len; i++) {
                $(autoCompleteDivs[i]).autocomplete('destroy'); //NO I18N
            }
​
            $("#container").empty();
        }
    </script>
</head>
​
<body>
    <div>
        <button onclick="destroyAutoCompleteEmpty();">Destroy Autocomplete Empty</button>
​
        <button onclick="destroyAutoCompleteSingle();">Destroy Autocomplete Single</button>
​
        <button onclick="createAutoComplete();">Init Autocomplete</button>
        <br>
        <div>
            <ol id="container"></ol>
        </div>
        <div id="content">
        </div>
    </div>
    <script type="text/javascript">
        populateContent();
        createAutoComplete();
    </script>
</body>
​
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers