jquery自動完成組合框錯誤：未捕獲TypeError：對象[對象對象]沒有方法'按鈕'

Question

我想實現一個使用jquery ui插件的自動完成組合框。

與下文提到的代碼我是能夠實現自動填充的一部分，但不是下拉部分（由於未捕獲的類型錯誤的下拉箭頭是不可見）

$.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: 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); 
      }; 

      $("<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); 
     } 
    }); 



    $("#combobox").combobox(); 

上面的代碼是在document.ready下。 由於'.button'方法引發錯誤。

的HTML：

 <tr> 
      <td><label>Country:</label></td> 
      <td> 

      <div class="ui-widget"> 

        <select id="combobox"> 
         <option value="">Select one...</option> 
          <option value="ActionScript">ActionScript</option> 
          <option value="AppleScript">AppleScript</option> 
          <option value="Asp">Asp</option> 
          <option value="BASIC">BASIC</option> 
          <option value="C">C</option>  
        </select> 

      </div> 
      </td> 
     </tr> 

組合框的CSS，

.ui-combobox { 
    position: relative; 
    display: inline-block; 
} 
.ui-combobox-toggle { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin-left: -1px; 
    padding: 0; 
    /* adjust styles for IE 6/7 */ 
    *height: 1.7em; 
    *top: 0.1em; 
} 
.ui-combobox-input { 
    margin: 0; 
    padding: 0.3em; 
} 

腳本序列，

<script type="text/javascript" src="<?php echo base_url('/assets/js/jquery.js'); ?>"></script> 
    <script type="text/javascript" src="<?php echo base_url('/assets/js/validation.js'); ?>"></script> 
    <script type="text/javascript" src="<?php echo base_url('/assets/autocomplete/js/jquery-ui-1.8.21.custom.min.js'); ?>"></script> 


    <?= $_scripts ?> 

• 的jQuery 1.7.2版本，jQuery UI的版本21年1月8日
• 我試圖重新安排腳本
• 有不同的jQuery版本沒有多個實例的序列。

任何幫助，將不勝感激。謝謝！

Answer 1

你的代碼看起來很好，所以問題幾乎可以肯定你沒有在你自定義的jQuery UI版本中包含ui.button。

您可以通過運行typeof $.ui.button進行驗證。如果你有它包括它將是function，如果你不是它將是undefined。

Re-build jQuery UI並確保選中Button複選框。