Anushka Reddy Anushka Reddy - 5 months ago 26
jQuery Question

did not match item error in jquery combobox

I have implemented jquery combobox in my blog

my problem is when we search

grapes
mango


if we select only it is showing correct and the links are redirection in sucess but

when i type the text it shows the error
"grapes didn't match any item"


I have seen Kendo combobox which works fine but i not able to get in jquery autocomplete combobox.

The below is the code i have used to implement in my blog

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


And the below is the full code which i implemented in my blog

<!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

Correct your select options with proper closing tags :

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

Check out working code here : 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>