jQuery UI Combobox max-width選項

Question

我遇到了這個問題，我正在設計一個包含jQuery UI組合框的浮動小部件，它允許內容直接從屏幕的一側環繞。我似乎無法控制jQuery UI即時創建的菜單容器的實際寬度。我已經閱讀了其他一些選項，其中包括打開組合框時應該觸發的「打開」事件，但我沒有任何運氣可以讓它工作。

這裏是什麼，我有一個小提琴... http://jsfiddle.net/farina/RDd3A/14/

它說明從我的窗口小部件的代碼小SNIPPIT。正如你所看到的，這個小部件將被正確對齊，並且使用絕對定位從一個初始的相關項目中浮動。其他一切都按預期工作，我只是努力將「選項菜單」保留在小部件容器的範圍內。

您會注意到第一次點擊下拉箭頭時，菜單容器會吹出頁面的一面。它不在jsFiddle查看器中時效果更糟。

任何幫助是非常感謝，因爲這是讓我瘋了！

Answer 1

好的，所以...在挖掘之後，我意識到jQuery ui.combobox爲其創建的自動完成提供了硬編碼選項。我發現這是一團糟，而且絕不是一個完整的小部件。

我從這裏jQuery UI Source將源和與它自己的選擇增強它反對這樣的固定我的問題......

(function ($) { 
    $.widget("ui.combobox", { 
     options: { 
      appendTo: "body", 
      position: { 
       my: "left top", 
       at: "left bottom", 
       collision: "none" 
      } 
     }, 

     _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({ 
         appendTo: self.options.appendTo, 
         position: self.options.position, 
         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.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); 

這在非常至少可以讓你通過兩個比較重要的造型選項自動完成（appendTo和position）。

然後，你可以簡單地做這樣的事情...

$('#myCombobox').combobox({ position: { my: "right top", at: "right bottom"} }); 

經過進一步挖掘，我決定做這樣的事情......

$('#myCombobox').combobox({ position: { collision: "flip", offset: "-25 0"} }); 

這給了我正是我需要的！

Answer 2

你可以給下拉一個固定的寬度，如： 的.ui菜單{寬度：100像素;}

不會說這樣的伎倆？