Didn't find any thing when user types the text in jquery combobox
i have added the jquery combobox sucessfully from this
but the problem is when user types the text and searches it wont appear but when user select the text i.e tag for exam grapes when user select it shows the out put.
But when user types and leaves it shows didn't match any item
iam uploading image will clear the question
This is the link .attr( "title", value + " didn't match any item" ) which cause disturbance actually iam new to code.
Any help really appreciable.
The below is my code which i have implemented in blogger
HTML code
- <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§ionId=main" onclick=" return
- _WidgetManager._PopupConfig(document.getElementById("HTML3")); "
- 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>
CSS CODE
- <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>
The java script
code
- <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>
The other host css and javascript files of combobox
- <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>