title: Jquery - Autocomplete combobox - live()?
body: <p>I have a couple of autocomplete comboboxes in a div.<br>
  I have to cut it and put in into another div on some action.
  Upon doing so, it does not copy the events of autocomplete.</p>
  
  <p>I am aware of .live() that keeps events binded to elements
  all the time.  But how to use .live for this autocomplete
  combobox widget. Pls suggest?</p>
  
  <p>thanks in advance. </p>
  
  <p>A code sample as follows:</p>
  
  <p><strong>HTML Page</strong></p>
  
  <p></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" /&gt;
      &lt;script type="text/javascript" src="jquery-1.5.1.js"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript" src="../js/jquery-ui-1.8.13.min.js"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript" src="jquery.ui.combobox.js"&gt;&lt;/script&gt; 
  
  &lt;style type="text/css"&gt;
     .ui-button { margin-left: -1px; }
     .ui-button-icon-only .ui-button-text { padding: 0.35em; }
     .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
     .ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}
     .ui-menu .ui-menu-item { font-size:8pt; }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function() {
          $("#combobox").combobox();
          $("#toggle").click(function() {$("#combobox").toggle();});
      })
  
      function cutpasteCombo(id) {
          $('#pasteHere').html($('#comboCtrl').html());
          $('#comboCtrl').html('');
          $(id).attr('disabled',true);
      }
  
      &lt;/script&gt;     
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div id='comboCtrl'&gt;
          &lt;label&gt;Your preferred programming language&lt;/label&gt; 
          &lt;select id="combobox" style="width:250px;"&gt; 
              &lt;option value=""&gt;Select one...&lt;/option&gt; 
              &lt;option value="1"&gt;ActionScript&lt;/option&gt; 
              &lt;option value="AppleScript"&gt;AppleScript&lt;/option&gt; 
              &lt;option value="Asp"&gt;Asp&lt;/option&gt; 
              &lt;option value="BASIC"&gt;BASIC&lt;/option&gt; 
              &lt;option value="C"&gt;C&lt;/option&gt; 
              &lt;option value="C++"&gt;C++&lt;/option&gt; 
              &lt;option value="Clojure"&gt;Clojure&lt;/option&gt; 
              &lt;option value="COBOL"&gt;COBOL&lt;/option&gt; 
              &lt;option value="ColdFusion"&gt;ColdFusion&lt;/option&gt; 
              &lt;option value="Erlang"&gt;Erlang&lt;/option&gt; 
          &lt;/select&gt; 
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;input type="button" value="Cut &amp; Paste Combo" onclick="cutpasteCombo(this);" /&gt;
      &lt;br /&gt;&lt;br /&gt;
  
      &lt;div id='pasteHere'&gt;
          Place the combo here...
      &lt;/div&gt;
  
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Javascript: autocomplete-combobox-widget (from jquery)</strong></p>
  
  <pre><code>(function($) {
      $.widget("ui.combobox", {
          _create: function() {
              var self = this,
                      select = this.element.hide(),
                      selected = select.children(":selected"),
                      value = selected.val() ? selected.text() : "",
                      theWidth = select.width(); 
              var input = this.input = $("&lt;input style=\"width:" + theWidth + "px\"&gt;")
                      //.insertAfter(select)
                      .val(value)
                      .autocomplete({
                          delay: 0,
                          minLength: 0,
                          source: function(request, response) {
                              var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                              response(select.children("option").map(function() {
                                  var text = $(this).text();
                                  if (this.value &amp;&amp; (!request.term || matcher.test(text)))
                                      return {
                                          label: text.replace(
                                              new RegExp(
                                                  "(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(" +
                                                  $.ui.autocomplete.escapeRegex(request.term) +
                                                  ")(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)", "gi"
                                              ), "&lt;strong&gt;$1&lt;/strong&gt;"),
                                          value: text,
                                          option: this
                                      };
                              }));
                          },
                          select: function(event, ui) {
                              ui.item.option.selected = true;
                              self._trigger("selected", event, {
                                  item: ui.item.option
                              });
                          },
                          change: function(event, ui) {
                              if (!ui.item) {
                                  var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                      valid = false;
                                  select.children("option").each(function() {
                                      if ($(this).text().match(matcher)) {
                                          this.selected = valid = true;
                                          return false;
                                      }
                                  });
                                  if (!valid) {
                                      // remove invalid value, as it didn't match anything
                                      $(this).val("");
                                      select.val("");
                                      input.data("autocomplete").term = "";
                                      return false;
                                  }
                              }
                          }
                      })
                      .addClass("ui-widget ui-widget-content ui-corner-left");
                      var span = $("&lt;span style=\" white-space: nowrap;\"&gt;&lt;/span&gt;").append(input).insertAfter(select);
  
              input.data("autocomplete")._renderItem = function(ul, item) {
                  return $("&lt;li&gt;&lt;/li&gt;")
                          .data("item.autocomplete", item)
                          .append("&lt;a&gt;" + item.label + "&lt;/a&gt;")
                          .appendTo(ul);
              };
  
              this.button = $("&lt;button type='button'&gt;&amp;nbsp;&lt;/button&gt;")
                      .attr("tabIndex", -1)
                      .attr("title", "Show All Items")
                      .insertAfter(input)
                      .button({
                          icons: {
                              primary: "ui-icon-triangle-1-s"
                          },
                          text: false
                      })
                      .removeClass("ui-corner-all")
                      .addClass("ui-corner-right ui-button-icon")
                      .click(function() {
                          // close if already visible
                          if (input.autocomplete("widget").is(":visible")) {
                              input.autocomplete("close");
                              return;
                          }
  
                          // work around a bug (likely same cause as #5265)
                          $(this).blur();
  
                          // pass empty string as value to search for, displaying all results
                          input.autocomplete("search", "");
                          input.focus();
                      });
          },
  
          destroy: function() {
              this.input.remove();
              this.button.remove();
              this.element.show();
              $.Widget.prototype.destroy.call(this);
          }
      });
  })(jQuery);
  </code></pre>