擁有jQuery的UI自動完成的問題

首先，我已經添加了這一行input.val($("#parent option:selected").text());到下面的腳本設置默認文本jQuery UI的組合框。

問題是我想刪除此文本onclick（類似html5佔位符，但我想crossbrowser支持）。如何修改下面的代碼來解決這個問題？

(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);

第二，我生成從MySQL表選項具有以下PHP函數的幫助。如您所見，它會根據父子結構生成選擇框選項。但是在實現jQuery UI組合框之後，選項的背景顏色不會改變。如何處理這個問題？

<?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; 
    } 
} 
?>

來源

2011-10-15 The Coder

擁有jQuery的UI自動完成的問題

回答

相關問題