Search jQuery

jQuery Forum

Using jQuery UI

mirhashmi

AutoComplete - ComboBox - live()

in Using jQuery UI • 11 years ago

Hello

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.

How to use .live() with this autocomplete combobox widget ?

I am about to pull my hair....

thanks in advance.

Sample as follows:

HTML PAGE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

ui.Combo.js

(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.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);

chiramisu

Re: AutoComplete - ComboBox - live()

11 years ago

I'm having similar issues, and furthermore I'm disgusted with the lack of involvement in this so-called "community." I've looked at probably 50 post with a cumulative thousands of views and NOT A SINGLE REPLY!!

I guess I'll be the first, even if not very useful. I'm still seeking a way to more simply implement this control with fewer lines of code, because frankly the combobox demo has a completely unacceptable 174 lines of code to it. I thought jQuery was supposed to abstract away much of that and simplify implementation for the developer. The combobox control falls WAY short of this endeavor.

Cheers!

kikketer

Re: Re: AutoComplete - ComboBox - live()

11 years ago

The combobox control falls WAY short of this endeavor.

I have to agree, zero support for this component and I'm starting to doubt the whole ui framework.

Response title

Attachments

jQuery Forum

AutoComplete - ComboBox - live()

Re: AutoComplete - ComboBox - live()

Re: Re: AutoComplete - ComboBox - live()

Statistics

Tags

Actions