Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF8">
  <title>jQuery UI Autocomplete Combobox Demo</title> 
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" media="all" /> 
      <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script> 
 
<style type="text/css">
input {
  outline: 0pt;
  text-align: left
}
.demo {
  text-align: center;
  width: 320px;
  margin: 20px auto
}
.info {
  font: italic normal 16px "Trebuchet MS", sans-serif;
}
.message, .demo h1 {
  padding: 10px;
  color: #00FFFF;
  background-color: #333;
  font: normal normal 30px Impact, fantasy;
  text-transform: uppercase;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
h1 strong {
  color: white;
  font-weight: normal
}
.demo h1 span {
  color: fuchsia
}
.demo span.terms {
  color: white
}
.demo span.char_count {
  color: yellow
}
/* TODO shouldn't be necessary */
.ui-button-icon-only .ui-button-text {
  padding: 0.35em;
}
.ui-autocomplete-input {
  padding: 0.48em 0 0.47em 0.45em;
}
</style>
  
</head>
<body>
<script type="text/javascript">
​
 $(function() {
​
    var availableTags = ['csharp', 'java', 'python' , 'javascript' , 'pearl' , 'ruby'];
​
    $("button").button({
        icons: {
            primary: 'ui-icon-circle-zoomout'
        },
        text: false
    }).click(function() {  
      $("#autocomplete").autocomplete( 'search' ).focus();
    });
​
   
    $("#autocomplete").val(availableTags[0]);
​
    $("#autocomplete").autocomplete({
        source: availableTags,
        mustMatch: true,
        minLength: 3,
        select: function(event, ui) {
          
          // CUT HERE ---- JUST FOR SAKE
          $('.pseudo_ajax').fadeOut(500, function(){ 
          $(this).empty().append('have you searched for <span class="terms">' + 
          ui.item.value + 
          '</span> ?' ).fadeIn(500) 
          });
          // CUT HERE ---- JUST FOR SAKE
            
        }
    });
​
​
    $("#autocomplete").keypress(function(event) {
     
if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode: event.keyCode)) {
    event.which = event.charCode || event.keyCode;
}
   
        var charCode = String.fromCharCode(event.which).toLowerCase();
      
        var search_val = this.value + charCode;
        var x = search_val.length - 1;
        var match;
        for (var i = 0; i < availableTags.length; i++) {
          
        if (charCode == availableTags[i][x] && availableTags[i].indexOf(search_val) != -1 ) {
            
        // CUT HERE ---- JUST FOR SAKE
        if ( x < 3 ) {
          $('.pseudo_ajax').fadeOut(200, function(){ 
            $(this).empty().append('{ <span class="char_count">' + 
            (x+1) + '</span> } of 3 <span class="char_count">required</span> char').fadeIn(200);
          });
        }
        // CUT HERE ---- JUST FOR SAKE
              
          match = true;
            } 
        }
        if (!match && event.which != 8 ) {
            event.preventDefault();
        } 
    });
     
          // CUT HERE ---- JUST FOR SAKE
     $("#autocomplete").bind("dblclick", function(){
          
          $(this).val('');
          $('.pseudo_ajax').fadeOut(200, function(){ 
            $(this).empty().append('type <span class="char_count">something</span> !').fadeIn(200);
          });
          });      
          
   
          $('.demo h1 span:eq(1)').append( availableTags.join(' <strong>&bull;</strong> ') );
          // CUT HERE ---- JUST FOR SAKE
});
</script>
<body> 
  
<!-- Start demo --> 
<div class="demo">    <h1>available 
    <span class="terms">terms
    </span> are 
    <span>
    </span></h1>
  <input type="text" id="autocomplete" class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" />
  <button> Search! 
  </button>
  <p class="message">
    <span class="pseudo_ajax">welcome!
    </span>
  </p>  
  <p class="info"><strong>double click</strong> on the search box for <strong>clear</strong> it!
  </p>
</div>
<!-- End demo --> 
 
</body> 
</html>
 
​
 
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers