不匹配 jquery 组合框中的项目错误

Question

我在 blog

中实现了 jquery 组合框

我的问题是当我们搜索时

grapes
mango

如果我们 select 只有它显示正确并且链接成功重定向但是

当我键入文本时显示错误 "grapes didn't match any item"

我见过 Kendo 组合框，它工作正常，但我无法进入 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.autocomplete( "instance" ).term = "";
      },

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

  $(function() {
    $( "#cmbSidebar" ).combobox();
    $( "#toggle" ).click(function() {
      $( "#comSidebar" ).toggle();
    });
  });
  </script>

下面是我在博客中实现的完整代码

<!doctype html>


  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<style>
.custom-combobox {
    position: relative;
    display: inline-block;
  }
.custom-combobox-toggle {
    height: 30px;

    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }

.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
  }
.ui-autocomplete-input
{ 
    width: 100px;
}

  </style>



<div class="tabs-outer">
    <div class="tabs-cap-top cap-top">
        <div class="cap-left"></div>
        <div class="cap-right"></div>
    </div>
    <div class="fauxborder-left tabs-fauxborder-left">
        <div class="fauxborder-right tabs-fauxborder-right"></div>
        <div class="region-inner tabs-inner">
            <div class="tabs section" id="main">
                <div class="widget HTML" id="HTML3">
                    <h2 class="title">Search Fruits</h2>
                    <div class="widget-content">
                        <div id="multi-search">
                            <select id="cmbColumn" name="cmbColumn">
                                <option value="" />Columns
                                <option value="apple+" />apple
                                <option value="berry+" />berry
                            </select>
                            <select id="cmbSidebar" name="cmbSidebar">
                                <option value="" />Sidebars
                                <option value="grapes+" />grapes
                                <option value="mango+" />mango

                            </select>

<input type="button"  id="toggle" onclick="getValue()" value="Search"/>

                        </div>
                    </div>
                    <div class="clear"></div>
                    <span class="widget-item-control">
                            <span class="item-control blog-admin">
                                <a class="quickedit" href="https://www.blogger.com/rearrange?

blogID=1273768514594589200&action=editWidget&sectionId=main" onclick=" return 

_WidgetManager._PopupConfig(document.getElementById(&quot;HTML3&quot;)); " 

target="configHTML3" title="Edit">
                                    <img alt="" 

src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18" />
                                </a>
                            </span>
                        </span>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="tabs section" id="main"></div>
        </div>
    </div>
    <div class="tabs-cap-bottom cap-bottom">
        <div class="cap-left"></div>
        <div class="cap-right"></div>
    </div>
</div>
<script type="text/javascript">
    function getValue() {
     var valcmbColumn = document.getElementById("cmbColumn").value;
     var valcmbSidebar = document.getElementById("cmbSidebar").value;

    valOutput = "label:"+valcmbColumn+"|label:"+ valcmbSidebar;
    window.open("/search/?q=" + valOutput, "_self");
  }

</script>











<script type="text/javascript">
  (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.autocomplete( "instance" ).term = "";
      },

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

  $(function() {
    $( "#cmbSidebar" ).combobox();
    $( "#toggle" ).click(function() {
      $( "#cmbSidebar" ).toggle();
    });
  });
  </script>



</!doctype>

Answer 1

使用正确的结束标记更正您的 select options :

<select id="cmbSidebar" name="cmbSidebar">
   <option value="">Sidebars</option>
   <option value="grapes+">grapes</option>
   <option value="mango+">mango</option>
</select>

在此处查看工作代码：https://jsfiddle.net/h77b30wz/1/

function getValue() {
    var valcmbColumn = document.getElementById("cmbColumn").value;
    var valcmbSidebar = document.getElementById("cmbSidebar").value;

    valOutput = "label:" + valcmbColumn + "|label:" + valcmbSidebar;
    window.open("http://urstrulyvijay.blogspot.in/search/?q=" + valOutput, "_self");
  }
  (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.autocomplete("instance").term = "";
      },

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

$(function() {
  $("#cmbSidebar").combobox();
  $("#toggle").click(function() {
    $("#cmbSidebar").toggle();
  });
});

.custom-combobox {
  position: relative;
  display: inline-block;
}
.custom-combobox-toggle {
  height: 30px;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  padding: 0;
}
.custom-combobox-input {
  margin: 0;
  padding: 5px 10px;
}
.ui-autocomplete-input {
  width: 100px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="tabs-outer">
  <div class="tabs-cap-top cap-top">
    <div class="cap-left"></div>
    <div class="cap-right"></div>
  </div>
  <div class="fauxborder-left tabs-fauxborder-left">
    <div class="fauxborder-right tabs-fauxborder-right"></div>
    <div class="region-inner tabs-inner">
      <div class="tabs section" id="main">
        <div class="widget HTML" id="HTML3">
          <h2 class="title">Search Fruits</h2>
          <div class="widget-content">
            <div id="multi-search">
              <select id="cmbColumn" name="cmbColumn">
                <option value="">Columns</option>
                <option value="apple+">apple</option>
                <option value="berry+">berry</option>
              </select>
              <select id="cmbSidebar" name="cmbSidebar">
                <option value="">Sidebars</option>
                <option value="grapes+">grapes</option>
                <option value="mango+">mango</option>

              </select>

              <input type="button" onclick="getValue()" value="Search" />

            </div>
          </div>
          <div class="clear"></div>
          <span class="widget-item-control">
                            <span class="item-control blog-admin">
                                <a class="quickedit" href="https://www.blogger.com/rearrange?

blogID=1273768514594589200&action=editWidget&sectionId=main" onclick=" return 

_WidgetManager._PopupConfig(document.getElementById(&quot;HTML3&quot;)); " 

target="configHTML3" title="Edit">
                                    <img alt="" 

src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18" />
                                </a>
                            </span>
          </span>
          <div class="clear"></div>
        </div>
      </div>
      <div class="tabs section" id="main"></div>
    </div>
  </div>
  <div class="tabs-cap-bottom cap-bottom">
    <div class="cap-left"></div>
    <div class="cap-right"></div>
  </div>
</div>

不匹配 jquery 组合框中的项目错误

did not match item error in jquery combobox

javascript

jquery

combobox

jquery-plugins

jquery-ui-autocomplete