jquery UI自動完成組合框問題

我試圖用這個例子http://jqueryui.com/demos/autocomplete/#combobox。但它默認顯示空白選項。而不是「選擇一個...」。如何解決這個問題？有什麼建議麼？還有一個問題：我不使用示例中顯示的「顯示底層菜單」。在js代碼中有沒有未使用的電腦代碼的按鈕？如果是，請讓我知道？提前jquery UI自動完成組合框問題

enter image description here

THX

來源

2011-09-13 Tural Ali

它顯示了默認爲空選項。而不是「選擇一個...」。如何解決這個問題？

這發生的原因是這樣的一段代碼在_create功能：

value = selected.val() ? selected.text() : "";

只要改變三元的假部分說「選擇一項」：

value = selected.val() ? selected.text() : "Select one...";

以下是修改後的小工具供參考：

$.widget("ui.combobox", { 
    _create: function() { 
     var self = this, 
      select = this.element.hide(), 
      selected = select.children(":selected"), 
      value = selected.val() ? selected.text() : "Select One..."; 
     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) { 
          $(this).val(""); 
          select.val(""); 
          input.data("autocomplete").term = ""; 
          return false; 
         } 
        } 
       } 
      }) 
      .addClass("ui-widget ui-widget-content ui-corner-left"); 

     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() { 
       if (input.autocomplete("widget").is(":visible")) { 
        input.autocomplete("close"); 
        return; 
       } 

       $(this).blur(); 
       input.autocomplete("search", ""); 
       input.focus(); 
      }); 
    }, 

    destroy: function() { 
     this.input.remove(); 
     this.button.remove(); 
     this.element.show(); 
     $.Widget.prototype.destroy.call(this); 
    } 
});

我不使用「show underlying menu」buton，如示例中所示。在js代碼中有沒有未使用的電腦代碼的按鈕？

是的，你可以安全地刪除該按鈕。實際上，您需要的僅僅是一個select元素來初始化小部件。

下面是沒有按鈕並帶有「Select one ...」作爲默認文本的組合框的示例：http://jsfiddle.net/andrewwhitaker/MgjRy/

來源

2011-09-14 02:56:49

jquery UI自動完成組合框問題

回答

相關問題