Oct 162011
Programming in javascript: Removing on the fly on newest questions tagged javascript – Stack Overflow
I’m generating select menu’s options based on parent child structure with php side script (i’ve placed it above). Recently I’ve implemented jquery-ui autocomplete combobox.
The problems are:
1) As you see from php script, it adds extra  s based on parent-child structure. Is there any way to remove theese empty space from option on the fly (with js) if any option selected?
2) PHP script adds background colors based on parent child structure. After implementing jquery-ui they’re gone. How to return colors back?
PHP Side
<?php
$db = new MySQLi('localhost', 'user', 'pass', 'db') or die($db->error);
$db->set_charset('utf8');
if(isSet($_POST['menu'])) {
$menu = $db->escape_string($_POST['menu']);
if($menu!=0){
if(generateOptions(0,0, 0, $menu, $db))
echo '<option value="" selected="selected">Birini seçin...</option>'.generateOptions(0,0, 0, $menu, $db);
else echo '';
}
else echo '';
}
function generateOptions($parent, $level, $padding, $menu, $db)
{
$result=$db->query("SELECT id, name FROM menu WHERE parent='$parent' AND showinmenu='$menu'");
$spacer = ' ';
$padding = str_repeat($spacer, $level);
$html = "";
while($data=$result->fetch_row()){
$children_html = generateOptions($data[0], $level+1, $padding, $menu,$db);
$optstyle = empty($children_html) ? 'std' : 'bold';
$html .= generateOption($optstyle.'option', $level, $data, $padding);
$html .= $children_html;
}
return $html;
}
function generateOption($type, $level, $data, $padding){
$bgcolor=array('0'=>'#f66e02','1'=>'#FF9C4D', '2'=>'#FF9C4D');
$fontcolor=array('0'=>'#fff','1'=>'#000', '2'=>'#000');
switch($type){
case 'boldoption': return '<option class="bold" style="background-color:'.$bgcolor[$level].'; color:'.$fontcolor[$level].'" value="'.$data[0].'">'.$padding.$data[1]."</option>\n"; break;
case 'stdoption': return '<option class="std" value="'.$data[0].'">'.$padding.$data[1]."</option>\n"; break;
}
}
?>
JS side
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var input = this.input = $( "<input placeholder='Bizimlə əlaqə'>" )
.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 emptyText = $("#parent option:selected").text();
input.attr('title', emptyText).val(emptyText);
input.focus(function() {
var $this = $(this);
if ($this.val() == $this.attr('title')) {
$this.val('');
}
});
input.blur(function() {
var $this = $(this);
if ($this.val() == '')
$this.val($this.attr('title'));
});
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 );
},
disable: function() {
this.button.button("disable");
this.input.autocomplete("disable"); // this disables just the popup menu (widget),
this.input.propAttr( "disabled", true ); // so disable the text input too...
this.input.addClass("ui-autocomplete-disabled ui-state-disabled").attr( "aria-disabled", true );
},
enable: function() {
this.button.button("enable");
this.input.autocomplete("enable");
this.input.propAttr( "disabled", false );
this.input.removeClass("ui-autocomplete-disabled ui-state-disabled").attr( "aria-disabled", false );
}
});
})( jQuery );
See Answers
source: http://stackoverflow.com/questions/7784253/removing-nbsp-on-the-fly
Programming in javascript: programming-in-javascript
What i do not realize is in fact how you’re not actually much more smartly-appreciated than you might be now. You are very intelligent. You recognize thus considerably with regards to this subject, produced me in my view believe it from so many varied angles. Its like women and men are not involved until it is one thing to accomplish with Woman gaga! Your individual stuffs nice. All the time maintain it up!