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 lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $( function() {
      var availableTags = [
        { label: "ActionScript", value: 124 },
        { label: "AppleScript", value: 155 },
        { label: "Asp", value: 145 },
        { label: "BASIC", value: 178 },
        { label: "C", value: 112 },
        { label: "C++", value: 156 },
        { label: "Clojure", value: 186 },
        { label: "COBOL", value: 137 },
        { label: "ColdFusion", value: 122 },
        { label: "Erlang", value: 111 },
        { label: "Fortran", value: 184 },
        { label: "Groovy", value: 134 },
        { label: "Haskell", value: 166 },
        { label: "Java", value: 139 },
        { label: "JavaScript", value: 199 },
        { label: "Lisp", value: 110 },
        { label: "Perl", value: 107 },
        { label: "PHP", value: 162 },
        { label: "Python", value: 155 },
        { label: "Ruby", value: 193 },
        { label: "Scala", value: 126 },
        { label: "Scheme", value: 177 }
      ];
      $( "#tags" ).autocomplete({
        source: availableTags,
        focus: function(event, ui) {
          this.value = ui.item.label;
          event.preventDefault();
        },
        select: function(event, ui) {
          this.value = ui.item.label;
          // Do something else with the real value
          $("#tags-value").val(ui.item.value);
          
          event.preventDefault();
        }
      });
    } );
  </script>
</head>
<body>
  <ul>
    <li>Enter "a" then use keyboard navigation; the input shows the object value.</li>
    <li>Using will show the highlighted value's label inside the input.</li>
  </ul>
​
  <div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
    <input id="tags-value" readonly> <!-- would likely be hidden -->
  </div>
​
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers