EE 29095975

by ChrisStanyon

HTML

<div  style="float: left;">
  <label for="tags">Search box : </label>
  <input id="tags">
</div>

<div style="float: left;">
  <label for="tags">Select box: </label>
  <select id="mySelect">
    <option></option>
    <option>ActionScript</option>
    <option>AppleScript</option>
    <option>Asp</option>
    <option>BASIC</option>
    <option>C</option>
    <option>C++</option>
    <option>Clojure</option>
    <option>COBOL</option>
    <option>ColdFusion</option>
    <option>Erlang</option>
    <option>Fortran</option>
    <option>Groovy</option>
    <option>Haskell</option>
    <option>Java</option>
    <option>JavaScript</option>
    <option>Lisp</option>
    <option>Perl</option>
    <option>PHP</option>
    <option>Python</option>
    <option>Ruby</option>
    <option>Scala</option>
    <option>Scheme</option>
  </select>
</div>

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"
];

$( "#tags" ).autocomplete({
    source: availableTags,
    select: function( event, ui ) {
        $('#mySelect').val(ui.item.label);
    }
});