Jquery UIオートコンプリートコンボボックスの問題

Question

私はこの例を使用しようとしていますhttp://jqueryui.com/demos/autocomplete/#combobox。しかし、デフォルトでは空白のオプションが表示されます。 「Select one ...」の代わりに。その問題を解決するには？助言がありますか？もう1つの質問：私は、例のショーのように、 "show underlying menu"を使わない。 jsコードにそのボタン用のコードの未使用のPCがありますか？はいの場合はお知らせください。

事前にThxを

Answer 1

それは、デフォルトでは空白のオプションを示しています。 「Select one ...」の代わりに。その問題を解決するには？

これが発生している理由は、_create関数内のコードのこの部分である：

value = selected.val() ? selected.text() : ""; 

ちょうど「ワンを選択する」と言って三元の偽の一部を変更します。

value = selected.val() ? selected.text() : "Select one..."; 

参考のために修正されたウィジェットがあります：

$.widget("ui.combobox", { 
    _create: function() { 
     var self = this, 
      select = this.element.hide(), 
      selected = select.children(":selected"), 
      value = selected.val() ? selected.text() : "Select One..."; 
     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 
        }); 
       }, 
       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) { 
          $(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); 
     }; 

     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() { 
       if (input.autocomplete("widget").is(":visible")) { 
        input.autocomplete("close"); 
        return; 
       } 

       $(this).blur(); 
       input.autocomplete("search", ""); 
       input.focus(); 
      }); 
    }, 

    destroy: function() { 
     this.input.remove(); 
     this.button.remove(); 
     this.element.show(); 
     $.Widget.prototype.destroy.call(this); 
    } 
}); 

---

私は例のショーのように "show underlying menu"を使用しません。 jsコードにそのボタン用のコードの未使用のPCがありますか？

はい、そのボタンを削除しても問題ありません。実際には、ウィジェットを初期化するには、select要素だけが必要です。

ここでボタンなしとしてコンボボックスの例です「いずれかを選択...」デフォルトのテキストとして：http://jsfiddle.net/andrewwhitaker/MgjRy/