title: swap values of two autotext boxes by clicking a button
body: <p>I have two autocomplete text boxes.  I have used jquery-ui widget for autocomlete textboxes.  I need to swap their values by clicking a button.</p>
  
  <p>Autocomplete text boxes are working fine. But click on the button it can't do swap.  </p>
  
  <p>Here is the code.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  
  &lt;head&gt;
  
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  
    &lt;script&gt;
      $(function() {
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];
  
        $("#from").autocomplete({
          source: availableTags
        });
  
        $("#to").autocomplete({
          source: availableTags
        });
  
  
        $("#change").on('click', function() {
          var pickup = $('#from').val();
          $('#from').val($('#to').val());
          $('#to').val(pickup);
  
  
        });
  
      });
    &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
    &lt;div class="ui-widget"&gt;
      &lt;label for="from"&gt;From:&lt;/label&gt;
      &lt;input id="from" type="text"&gt;
  
      &lt;input id="change" type="button" value="Swap"&gt;
  
      &lt;label for="to"&gt;To:&lt;/label&gt;
      &lt;input id="to" type="text"&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Simple textboxes swapping without autocomplete is working fine.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;script src="jquery.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      
      $(function (){
      
          $("#change").on('click',function(){
              var pickup = $('#from').val();
              $('#from').val($('#to').val());
              $('#to').val(pickup);
      });
      
      });
      
      &lt;/script&gt;
      
      &lt;/head&gt;
      &lt;body&gt;
      
      &lt;input id="from" type="text"/&gt;
      
      &lt;input id="change" type="button" value="Swap"&gt;
      
      &lt;input id="to" type="text"/&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>