Hộp kết hợp Jquery ui (tự động hoàn thành) biến mất

Question

Tôi đang cố gắng thực hiện điều này http://jqueryui.com/autocomplete/#combobox Vấn đề là khi tôi di chuột qua tùy chọn, các tùy chọn sẽ biến mất và nó gợi ý lời khuyên: "x không khớp với bất kỳ mục "trong đó x là các chữ cái tôi đã viết trong combobox. Bây giờ tôi gửi kịch bản đó là trên trang web:

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

    function removeIfInvalid(element) { 
     var value = $(element).val(), 
     matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "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 
     $(element) 
      .val("") 
      .attr("title", value + " didn't match any item") 
      .tooltip("open"); 
     select.val(""); 
     setTimeout(function() { 
      input.tooltip("close").attr("title", ""); 
     }, 2500); 
     input.data("ui-autocomplete").term = ""; 
     } 
    } 

    input = $("<input>") 
     .appendTo(wrapper) 
     .val(value) 
     .attr("title", "") 
     .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; 
      that._trigger("selected", event, { 
      item: ui.item.option 
      }); 
     }, 
     change: function(event, ui) { 
      if (!ui.item) { 
      removeIfInvalid(this); 
      } 
     } 
     }) 
     .addClass("ui-widget ui-widget-content ui-corner-left"); 

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

    $("<a>") 
     .attr("tabIndex", -1) 
     .attr("title", "Show All Items") 
     .tooltip() 
     .appendTo(wrapper) 
     .button({ 
     icons: { 
      primary: "ui-icon-triangle-1-s" 
     }, 
     text: false 
     }) 
     .removeClass("ui-corner-all") 
     .addClass("ui-corner-right ui-combobox-toggle") 
     .mousedown(function() { 
     wasOpen = input.autocomplete("widget").is(":visible"); 
     }) 
     .click(function() { 
     input.focus(); 

     // close if already visible 
     if (wasOpen) { 
      return; 
     } 

     // pass empty string as value to search for, displaying all results 
     input.autocomplete("search", ""); 
     }); 

    input.tooltip({ 
     tooltipClass: "ui-state-highlight" 
    }); 
    }, 

    _destroy: function() { 
    this.wrapper.remove(); 
    this.element.show(); 
    } 
}); 
    })(jQuery); 

    $(function() { 
    $("#combobox").combobox(); 
    }); 

và css:

.ui-combobox { 
position: relative; 
display: inline-block; 
} 
.ui-combobox-toggle { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin-left: -1px; 
    padding: 0; 
    /* support: IE7 */ 
    *height: 1.7em; 
    *top: 0.1em; 
} 
.ui-combobox-input { 
    margin: 0; 
    padding: 0.3em; 
} 

và tôi chọn (builded với JSP)

<select id="combobox"><option value="">Select one...</option> 
            <%for(int i=0;i<ut.size();i++){ 
            out.print("<option value=\""+ut.get(i).getIdUtente()+ 
              "\">"+ut.get(i).getNome()+" "+ut.get(i).getCognome()+" ("+ut.get(i).getIdUtente()+")"+"</option>"); 

            } 
             %> 

            </select> 

Bây giờ, đâu là của tôi vấn đề? cảm ơn trước!

Answer 1

Điều đó cũng xảy ra với tôi. Dường như tệp jQuery UI js được gọi hai lần. Xóa một và nó sẽ hoạt động

Answer 2

Điều này sẽ xảy ra trong một kịch bản có liên quan, trong đó bạn tham khảo thư viện jQuery UI chính (jquery-ui.js) và các thư viện riêng lẻ để tự động hoàn tất jquery ui. Tệp tin jQuery-ui chứa tất cả các con nên không cần tham chiếu cả hai.