有Jquery-UI自动完成问题

Question

I'm having 2 problems with my combobox:

First of all, I've added this line input.val( $("#parent option:selected").text()); into following script to set default text to Jquery UI combobox.

The problem is i want to remove this text onclick (something like html5 placeholder but i want crossbrowser support). How to modify the code below to fix that problem?

(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>" )
                .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" );
                input.val( $("#parent option:selected").text());
            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'>&nbsp;</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 );

And second, I'm generating options from MySQL table with the help of following PHP function. As you see, It generates select box options based on parent child structure. But after implementing jquery ui combobox, the background color of options doesn't change. How to deal wih that problem?

<?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 = '&nbsp;&nbsp;'; 
    $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;
    }
}
?>

Answer 1

要获得跨浏览器输入占位符的支持，可以查看以下信息： http : //albertoconnor.ca/blog/2011/Aug/21/jquery-fallback-html5-placeholder-attribute