Question

在jQuery UI上查看example for a combobox时，似乎Select One...选项在自动完成列表中不可用。

看起来像是在初始<select>语句中，但是在查看所有选项或开始输入时不可用：

<select id="combobox" style="display: none;">
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="">AppleScript</option>
    <option value="Asp">Asp</option>
    <option value="BASIC">BASIC</option>
    <option value="C">C</option>
    <option value="C++">C++</option>
    <option value="Clojure">Clojure</option>
    <option value="COBOL">COBOL</option>
    <option value="ColdFusion">ColdFusion</option>
    <option value="Erlang">Erlang</option>
    <option value="Fortran">Fortran</option>
    <option value="Groovy">Groovy</option>
    <option value="Haskell">Haskell</option>
    <option value="Java">Java</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Lisp">Lisp</option>
    <option value="Perl">Perl</option>
    <option value="PHP">PHP</option>
    <option value="Python">Python</option>
    <option value="Ruby">Ruby</option>
    <option value="Scala">Scala</option>
    <option value="Scheme">Scheme</option>
</select>

但是，它似乎没有出现在生成的<ul>列表中：

<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none; top: 39px; left: 287.667px; width: 189px;">
    <li class="ui-menu-item"><div id="ui-id-89" tabindex="-1" class="ui-menu-item-wrapper">ActionScript</div></li>
    <li class="ui-menu-item"><div id="ui-id-90" tabindex="-1" class="ui-menu-item-wrapper">Asp</div></li>
    <li class="ui-menu-item"><div id="ui-id-91" tabindex="-1" class="ui-menu-item-wrapper">BASIC</div></li>
    <li class="ui-menu-item"><div id="ui-id-92" tabindex="-1" class="ui-menu-item-wrapper">C</div></li>
    <li class="ui-menu-item"><div id="ui-id-93" tabindex="-1" class="ui-menu-item-wrapper">C++</div></li>
    <li class="ui-menu-item"><div id="ui-id-94" tabindex="-1" class="ui-menu-item-wrapper">Clojure</div></li>
    <li class="ui-menu-item"><div id="ui-id-95" tabindex="-1" class="ui-menu-item-wrapper">COBOL</div></li>
    <li class="ui-menu-item"><div id="ui-id-96" tabindex="-1" class="ui-menu-item-wrapper">ColdFusion</div></li>
    <li class="ui-menu-item"><div id="ui-id-97" tabindex="-1" class="ui-menu-item-wrapper">Erlang</div></li>
    <li class="ui-menu-item"><div id="ui-id-98" tabindex="-1" class="ui-menu-item-wrapper">Fortran</div></li>
    <li class="ui-menu-item"><div id="ui-id-99" tabindex="-1" class="ui-menu-item-wrapper">Groovy</div></li>
    <li class="ui-menu-item"><div id="ui-id-100" tabindex="-1" class="ui-menu-item-wrapper">Haskell</div></li>
    <li class="ui-menu-item"><div id="ui-id-101" tabindex="-1" class="ui-menu-item-wrapper">Java</div></li>
    <li class="ui-menu-item"><div id="ui-id-102" tabindex="-1" class="ui-menu-item-wrapper">JavaScript</div></li>
    <li class="ui-menu-item"><div id="ui-id-103" tabindex="-1" class="ui-menu-item-wrapper">Lisp</div></li>
    <li class="ui-menu-item"><div id="ui-id-104" tabindex="-1" class="ui-menu-item-wrapper">Perl</div></li>
    <li class="ui-menu-item"><div id="ui-id-105" tabindex="-1" class="ui-menu-item-wrapper">PHP</div></li>
    <li class="ui-menu-item"><div id="ui-id-106" tabindex="-1" class="ui-menu-item-wrapper">Python</div></li>
    <li class="ui-menu-item"><div id="ui-id-107" tabindex="-1" class="ui-menu-item-wrapper">Ruby</div></li>
    <li class="ui-menu-item"><div id="ui-id-108" tabindex="-1" class="ui-menu-item-wrapper">Scala</div></li>
    <li class="ui-menu-item"><div id="ui-id-109" tabindex="-1" class="ui-menu-item-wrapper">Scheme</div></li>
</ul

是否有一种优雅的方法可以将Select One...选项添加到我的jQuery-UI组合框中，而无需设置任意值？

Answer 1

在查看jQueryUI示例的源代码时，我发现以下部分：

  _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
        };
    }) );
  },

在上面的if语句中删除this.value的支票将添加未设置值的选择列表项：

  _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 ( !request.term || matcher.test(text) )
        return {
          label: text,
          value: text,
          option: this
        };
    }) );
  },

jQueryUI组合框未使用空值呈现“选择一个...”选项

1 个答案: