2014-01-29 35 views
0

所以我從jquery得到了這段代碼示例。這是一個自動完成功能,只有所有用戶才能選擇數據庫中的值。我想要的是它也可以從用戶那裏獲得本地輸入。你能幫我嗎?謝謝!Jquery自動完成插件不允許免費的用戶輸入

<script> 

    (function($) { 
    $.widget("custom.combobox", { 
     _create: function() { 
      this.wrapper = $("<span>") 
       .addClass("custom-combobox") 
       .insertAfter(this.element); 

      this.element.hide(); 
      this._createAutocomplete(); 
      this._createShowAllButton(); 
     }, 

     _createAutocomplete: function() { 
      var selected = this.element.children(":selected"), 
       value = selected.val() ? selected.text() : ""; 

      this.input = $("<input>") 
       .appendTo(this.wrapper) 
       .val(value) 
       .attr("title", "") 
       .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
       .autocomplete({ 
        delay: 0, 
        minLength: 0, 
        source: $.proxy(this, "_source") 
       }) 
       .tooltip({ 
        tooltipClass: "ui-state-highlight" 
       }); 

      this._on(this.input, { 
       autocompleteselect: function(event, ui) { 
        ui.item.option.selected = true; 
        this._trigger("select", event, { 
         item: ui.item.option 
        }); 
       }, 

       autocompletechange: "_removeIfInvalid" 
      }); 
     }, 

     _createShowAllButton: function() { 
      var input = this.input, 
       wasOpen = false; 

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

     _source: function(request, response) { 
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
      response(this.element.children("option").map(function() { 
       var text = $(this).text(); 
       if (this.value && (!request.term || matcher.test(text))) 
        return { 
         label: text, 
         value: text, 
         option: this 
        }; 
      })); 
     }, 

     _removeIfInvalid: function(event, ui) { 

      // Selected an item, nothing to do 
      if (ui.item) { 
       return; 
      } 

      // Search for a match (case-insensitive) 
      var value = this.input.val(), 
       valueLowerCase = value.toLowerCase(), 
       valid = false; 
      this.element.children("option").each(function() { 
       if ($(this).text().toLowerCase() === valueLowerCase) { 
        this.selected = valid = true; 
        return false; 
       } 
      }); 

      // Found a match, nothing to do 
      if (valid) { 
       return; 
      } 


       // Remove invalid value 
        this.input 
         .val("") 
         .attr("title", value + " didn't match any item") 
         .tooltip("open"); 
        this.element.val(""); 
        this._delay(function() { 
         this.input.tooltip("close").attr("title", ""); 


      }, 2500); 
      this.input.data("ui-autocomplete").term = ""; 
     }, 

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

$(function() { 
    $("#contact").combobox(); 
      $("#cuscode").combobox(); 
    $("#category").combobox(); 
      $("#group").combobox(); 
    $("#subbrand").combobox(); 
      $("#model").combobox(); 
    $("#compmodel").combobox(); 
    $("#toggle").click(function() { 
    $("#combobox").toggle(); 
    }); 
});</script> 
+0

使用jQueryUI自動完成模塊不是一個選項嗎? – Eternal1

+1

@АндрейПочекуев對不起,我沒有得到你想說的話。我的代碼完全來自jQueryUI自動完成模塊。它只接受來自數組或數據庫的輸入。但我還希望用戶從該組合框中輸入新值 – user3060463

回答

0

就刪除此行autocompletechange: "_removeIfInvalid"並從您的代碼_removeIfInvalid = function()塊。

+0

我嘗試刪除它,但仍然無法獲取組合框的值。它只允許輸入但在傳遞值後保持空。 – user3060463

+0

然後返回'autocompletechange:「_removeIfInvalid」',並使'_removeIfInvalid = function(event,ui){return;}' – Eternal1