Didn't find any thing when user types the text in jquery combobox

Didn't find any thing when user types the text in jquery combobox

This is my  Blog

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

  1. <div class="tabs-outer">
  2.     <div class="tabs-cap-top cap-top">
  3.         <div class="cap-left"></div>
  4.         <div class="cap-right"></div>
  5.     </div>
  6.     <div class="fauxborder-left tabs-fauxborder-left">
  7.         <div class="fauxborder-right tabs-fauxborder-right"></div>
  8.         <div class="region-inner tabs-inner">
  9.             <div class="tabs section" id="main">
  10.                 <div class="widget HTML" id="HTML3">
  11.                     <h2 class="title">Search Fruits</h2>
  12.                     <div class="widget-content">
  13.                         <div id="multi-search">
  14.                             <select id="cmbColumn" name="cmbColumn">
  15.                                 <option value="" />Columns
  16.                                 <option value="apple+" />apple
  17.                                 <option value="berry+" />berry
  18.                             </select>
  19.                             <select id="cmbSidebar" name="cmbSidebar">
  20.                                 <option value="" />Sidebars
  21.                                 <option value="grapes+" />grapes
  22.                                 <option value="mango+" />mango
  23.                                 
  24.                             </select>
  25.                             
  26. <input type="button"  id="toggle" onclick="getValue()" value="Search"/>
  27.                             
  28.                         </div>
  29.                     </div>
  30.                     <div class="clear"></div>
  31.                     <span class="widget-item-control">
  32.                             <span class="item-control blog-admin">
  33.                                 <a class="quickedit" href="https://www.blogger.com/rearrange?

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

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

  36. target="configHTML3" title="Edit">
  37.                                     <img alt="" 

  38. src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18" />
  39.                                 </a>
  40.                             </span>
  41.                         </span>
  42.                     <div class="clear"></div>
  43.                 </div>
  44.             </div>
  45.             <div class="tabs section" id="main"></div>
  46.         </div>
  47.     </div>
  48.     <div class="tabs-cap-bottom cap-bottom">
  49.         <div class="cap-left"></div>
  50.         <div class="cap-right"></div>
  51.     </div>
  52. </div>
CSS CODE

  1. <style>
  2. .custom-combobox {
  3.     position: relative;
  4.     display: inline-block;
  5.   }
  6. .custom-combobox-toggle {
  7.     height: 30px;
  8.     
  9.     top: 0;
  10.     bottom: 0;
  11.     margin-left: -1px;
  12.     padding: 0;
  13.   }

  14. .custom-combobox-input {
  15.     margin: 0;
  16.     padding: 5px 10px;
  17.   }
  18. .ui-autocomplete-input
  19.     width: 100px;
  20. }  
  21. </style>
The java script  code



  1. <script type="text/javascript">
  2.     function getValue() {
  3.      var valcmbColumn = document.getElementById("cmbColumn").value;
  4.      var valcmbSidebar = document.getElementById("cmbSidebar").value;

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

  8. </script>






  9.   
  10.   



  11. <script type="text/javascript">
  12.   (function( $ ) {
  13.     $.widget( "custom.combobox", {
  14.       _create: function() {
  15.         this.wrapper = $( "<span>" )
  16.           .addClass( "custom-combobox" )
  17.           .insertAfter( this.element );
  18.  
  19.         this.element.hide();
  20.         this._createAutocomplete();
  21.         this._createShowAllButton();
  22.       },
  23.  
  24.       _createAutocomplete: function() {
  25.         var selected = this.element.children( ":selected" ),
  26.           value = selected.val() ? selected.text() : "";
  27.  
  28.         this.input = $( "<input>" )
  29.           .appendTo( this.wrapper )
  30.           .val( value )
  31.           .attr( "title", "" )
  32.           .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
  33.           .autocomplete({
  34.             delay: 0,
  35.             minLength: 0,
  36.             source: $.proxy( this, "_source" )
  37.           })
  38.           .tooltip({
  39.             tooltipClass: "ui-state-highlight"
  40.           });
  41.  
  42.         this._on( this.input, {
  43.           autocompleteselect: function( event, ui ) {
  44.             ui.item.option.selected = true;
  45.             this._trigger( "select", event, {
  46.               item: ui.item.option
  47.             });
  48.           },
  49.  
  50.           autocompletechange: "_removeIfInvalid"
  51.         });
  52.       },
  53.  
  54.       _createShowAllButton: function() {
  55.         var input = this.input,
  56.           wasOpen = false;
  57.  
  58.         $( "<a>" )
  59.           .attr( "tabIndex", -1 )
  60.           .attr( "title", "Show All Items" )
  61.           .tooltip()
  62.           .appendTo( this.wrapper )
  63.           .button({
  64.             icons: {
  65.               primary: "ui-icon-triangle-1-s"
  66.             },
  67.             text: false
  68.           })
  69.           .removeClass( "ui-corner-all" )
  70.           .addClass( "custom-combobox-toggle ui-corner-right" )
  71.           .mousedown(function() {
  72.             wasOpen = input.autocomplete( "widget" ).is( ":visible" );
  73.           })
  74.           .click(function() {
  75.             input.focus();
  76.  
  77.             // Close if already visible
  78.             if ( wasOpen ) {
  79.               return;
  80.             }
  81.  
  82.             // Pass empty string as value to search for, displaying all results
  83.             input.autocomplete( "search", "" );
  84.           });
  85.       },
  86.  
  87.       _source: function( request, response ) {
  88.         var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
  89.         response( this.element.children( "option" ).map(function() {
  90.           var text = $( this ).text();
  91.           if ( this.value && ( !request.term || matcher.test(text) ) )
  92.             return {
  93.               label: text,
  94.               value: text,
  95.               option: this
  96.             };
  97.         }) );
  98.       },
  99.  
  100.       _removeIfInvalid: function( event, ui ) {
  101.  
  102.         // Selected an item, nothing to do
  103.         if ( ui.item ) {
  104.           return;
  105.         }
  106.  
  107.         // Search for a match (case-insensitive)
  108.         var value = this.input.val(),
  109.           valueLowerCase = value.toLowerCase(),
  110.           valid = false;
  111.         this.element.children( "option" ).each(function() {
  112.           if ( $( this ).text().toLowerCase() === valueLowerCase ) {
  113.             this.selected = valid = true;
  114.             return false;
  115.           }
  116.         });
  117.  
  118.         // Found a match, nothing to do
  119.         if ( valid ) {
  120.           return;
  121.         }
  122.  
  123.         // Remove invalid value
  124.         this.input
  125.           .val( "" )
  126.           .attr( "title", value + " didn't match any item" )
  127.           .tooltip( "open" );
  128.         this.element.val( "" );
  129.         this._delay(function() {
  130.           this.input.tooltip( "close" ).attr( "title", "" );
  131.         }, 2500 );
  132.         this.input.autocomplete( "instance" ).term = "";
  133.       },
  134.  
  135.       _destroy: function() {
  136.         this.wrapper.remove();
  137.         this.element.show();
  138.       }
  139.     });
  140.   })( jQuery );
  141.  
  142.   $(function() {
  143.     $( "#cmbSidebar" ).combobox();
  144.     $( "#toggle" ).click(function() {
  145.       $( "#cmbSidebar" ).toggle();
  146.     });
  147.   });
  148.   </script>



The other host css and javascript files of combobox

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