Question

需要一些帮助。

我可以将自定义值设置为组合框，即列表中不存在的值。

这意味着我自己的值未在列表中列出

这是代码。

(function( $ ) {
    $.widget( "ui.combobox", {
      _create: function() {
        this.wrapper = $( "<span>" )
          .addClass( "custom-combobox" )
          .insertAfter( this.element )
          .attr('id', this.element[0].id+"_combobox");

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

      _createAutocomplete: function() {

          var selected = this.element.children(":selected");
          this.input = $( "<input>" )
            .appendTo( this.wrapper )
            .attr( "title", '<fmt:message key="page.claim.personalclaimnotification.injury.select_info" />' )
            .val(selected.text())
            .css({
                color: function( index, value ) {
                    if (this.value == '<fmt:message key="page.claim.search.object.name" />') {
                        return "#777";
                    }
                },
                fontStyle: function( index, value ) {
                    if (this.value == '<fmt:message key="page.claim.search.object.name" />') {
                        return "italic";
                    }
                },
                width: "286px"
            })
            .attr("maxlength", 256)
            .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
            .autocomplete({
              delay: 0,
              minLength: 3,
              source: $.proxy( this, "_source" )
            })

          // executes when user selects illness from list
          this._on( this.input, {
            autocompleteselect: function( event, ui ) {
              ui.item.option.selected = true;
              this._trigger( "select", event, {
                item: ui.item.option
              });
            },
            autocompletechange: "_addIfInvalid"

          });

         },   /* _createAutocomplete close */

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

          $( "<a>" )
            .attr( "tabIndex", -1 )
            .appendTo( this.wrapper )
            .attr( "title", '<fmt:message key="page.claim.personalclaimnotification.injury.select_info" />' )
            .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() {

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

              // Pass triple spaces as value to search for, displaying all results (each has triple spaces at the end)
              input.autocomplete( "search", "   " );
            });
        },      /* _createShowAllButton close */

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


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

            alert("value "+ value +" this.element "+ this.element[0].id );

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

            this._delay(function() {
              this.input.tooltip( "close" ).attr( "title", "" );
            }, 2500 );
            this.input.autocomplete( "instance" ).term = "";
          },

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

        });     /* widget close */
    })( jQuery );   /* function close */ 


$(function() {
    $( ".objectComboBox" ).combobox();

});

如果下拉列表中未列出该元素，则应将该用户输入的元素作为值并保留在组合框字段中。

添加字段

Answer 1

我为你制作了一个剧本。可能会对你有用。

  <select  id="combobox" >
    <option>abc</option>
    <option>deg</option>
    <option>gcc</option>
  </select>

  <input type="text" id="addfieldtoddl" /><input type="button" value="add" id="add" onclick="addfieldtoddl()" />

  <script>
      $(document).ready(function(){
          $("#combobox").combobox();
      });
      function addfieldtoddl() {
          var YourValue = $("#addfieldtoddl").val();
          $('#combobox').append('<option val="'+ YourValue +'">'+ YourValue +'</option>');
          $("#combobox").combobox();
      }
  </script>

这里是小提琴链接http://jsfiddle.net/RDd3A/506/

试图帮助...... !!!

Jquery组合框自动完成

1 个答案: