2013-12-16 45 views
0

當這個在下面使用jQuery自動完成組合框插件:如何清除AutoComplete組合框中的默認值?

input.val(jQuery("#"+select.attr("id")+" :selected").text()); 

或添加這樣的默認值:

http://jqueryui.com/autocomplete/#combobox

您可以使用此設置的默認值

value = selected.val() ? selected.text() : "-Select an item-"; 

但是有沒有人知道如何清除點擊組合框的默認值?

//<![CDATA[ 
$(window).load(function(){ 
    (function($) { 
     $.widget("ui.combobox", { 
      _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({ 
         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 
          }); 
          select.trigger("change"); 
         }, 
         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"); 

           // This line added to set default value of the combobox 
         input.val(jQuery("#"+select.attr("id")+" :selected").text()); 

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

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

    $(function() { 
     $("#contactID").combobox({ change: function() { alert("changed"); }}); 
     $("#contactID").change(function() { 
      // alert(this.value); 
     }); 
    }); 
});//]]> 
+2

嘗試使用'placeholder'屬性代替。 –

+0

@RicardoLohmann,請舉個例子? – Kenny

+1

@'http://jsfiddle.net/m9mnY/ –

回答

1

添加.attr('placeholder', 'my placeholder text')排隊11:

10 var input = this.input = $("<input>") 
11 .attr('placeholder', 'my placeholder text') // ADD THIS 
12 .insertAfter(select) 
13 .val(value) 

還值得指出的是,Ricardo Loman's solution代碼仍然工作上面。

+0

就是這樣! 非常感謝。我希望有一種分解點的方法。裏卡多值得巨大的信貸,你也是。 非常感謝你們倆。 – Kenny