如何設置的minLength jQuery的組合框各個元素

Question

如何設置的minLength爲受到影響沒有其他的單個元素

編輯：

繼承人的插件代碼

(function ($) { 
     $.widget("ui.combobox", { 
      _create: function() { 
       var input, 
        self = this, 
        select = this.element.hide(), 
        selected = select.children(":selected"), 
        value = selected.val() ? selected.text() : "", 
        wrapper = this.wrapper = $("<span>") 
         .addClass("ui-combobox") 
         .insertAfter(select); 

       input = $("<input>") 
        .appendTo(wrapper) 
        .val(value) 
        .addClass("ui-state-default ui-combobox-input") 
        .autocomplete({ 
         delay: 300, 
         minLength: 2, 
         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); 
       }; 

       $("<a>") 
        .attr("tabIndex", -1) 
        .attr("title", "Show All Items") 
        .appendTo(wrapper) 
        .button({ 
         icons: { 
          primary: "ui-icon-triangle-1-s" 
         }, 
         text: false 
        }) 
        .removeClass("ui-corner-all") 
        .addClass("ui-corner-right ui-combobox-toggle") 
        .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.wrapper.remove(); 
       this.element.show(); 
       $.Widget.prototype.destroy.call(this); 
      } 
     }); 
    })(jQuery); 

我正在選擇哪些選擇標籤必須製作成這樣的組合框。

$("#tracklisting").combobox({ 
    selected: function(event, ui) { 
     var tracklisting = $("#tracklisting").val(); 
     var id = $("#id").val(); 

     $.post('writeToDB.php', { 
      id: id, 
      tracklisting: tracklisting 
     }); 
    } 
}) 

我在哪裏可以設置$("#tracklisting").autocomplete("option", "minLength", 0);來設置長度。我已經嘗試了很多東西，但無濟於事。

編輯： 這是一個jsfiddle鏈接到項目。 COMBOX可以留在默認值，但combobox2必須爲0 http://jsfiddle.net/5cMjk/4/

Answer 1

你試試這個：

$("#tracklisting").autocomplete({ minLength: 2 }); 

參見：http://jqueryui.com/demos/autocomplete/#option-minLength

演示：http://jsfiddle.net/5cMjk/1/

Answer 2

一個minlegth從jQuery用戶界面的.combobox（）小部件）.autocomplete的修改（似乎並沒有有儘可能多的選擇。

但是從它的代碼中您可以注意到它在運行中創建了一個輸入標籤，您可以嘗試再次對其重新應用.autocomplete（）方法。 輸入被放置在一個跨度舊選擇標籤後，我用的.next（）來選擇跨度：

var myMinLength = 10; 
$("#tracklisting").next().children("input").autocomplete({ 
        delay: 0, 

        minLength: myMinLength , 

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

如果你的組合框符在此之後，你也可以嘗試添加之後來到這些線路：

$("#tracklisting").next().children("input").addClass("ui-widget ui-widget-content ui-corner-left"); 

      $("#tracklisting").next().children("input").data("autocomplete")._renderItem = function(ul, item) { 
       return $("<li></li>") 
        .data("item.autocomplete", item) 
        .append("<a>" + item.label + "</a>") 
        .appendTo(ul); 
      };