Jquery - Autocomplete combobox - live()?
I have a couple of autocomplete comboboxes in a div.
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.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?
thanks in advance.
A code sample as follows:
HTML Page
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.13.min.js"></script>
<script type="text/javascript" src="jquery.ui.combobox.js"></script>
<style type="text/css">
.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; }
</style>
<script type="text/javascript">
$(function() {
$("#combobox").combobox();
$("#toggle").click(function() {$("#combobox").toggle();});
})
function cutpasteCombo(id) {
$('#pasteHere').html($('#comboCtrl').html());
$('#comboCtrl').html('');
$(id).attr('disabled',true);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id='comboCtrl'>
<label>Your preferred programming language</label>
<select id="combobox" style="width:250px;">
<option value="">Select one...</option>
<option value="1">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
</select>
</div>
<br />
<input type="button" value="Cut & Paste Combo" onclick="cutpasteCombo(this);" />
<br /><br />
<div id='pasteHere'>
Place the combo here...
</div>
</form>
</body>
</html>
Javascript: autocomplete-combobox-widget (from jquery)
(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 = $("<input style=\"width:" + theWidth + "px\">")
//.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 && (!request.term || matcher.test(text)))
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>"),
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 = $("<span style=\" white-space: nowrap;\"></span>").append(input).insertAfter(select);
input.data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
this.button = $("<button type='button'> </button>")
.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.rem开发者_JS百科ove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
You are copying and pasting the HTML. You need to use detach() on the actual combobox item and then append() to add it to the new location.
EDIT: try $("#pastehere").append($("#combobox").detach());.
加载中,请稍侯......
精彩评论