<html>
<head>
<link class="jsbin" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/flick/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script class="jsbin" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<style type="text/css" media="screen">
h1 { font-size: 20pt; color:Navy; }
h2 { font-size: 18pt; font-weight:bold; color: #DDD; }
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
body { margin:0; padding:0; height:100%;}
.ui-widget { font-size: 0.8em; line-height:0.6em; }
.ui-widget .ui-widget { font-size: 0.7em; }
div.inputDiv {
float: left;
height: 400px;
width:270
min-height: 100%;
border: Navy 1px dotted;
margin: 14px;
padding: 10px;
}
</style>
</head>
<body>
<div class='inputDiv'>
<h1>jQueryUI Autocomplete demo</h1>
<p>Type a few characters of a word</p>
<form action="jquery" id="form1">
<input type="text" id="input1"/>
</form>
</div>
<div id='msgs' class="inputDiv" style='font-size:10pt;font-weight:normal;'>
</div>
</body>
</html>
var wordlist = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November',
'December', 'Yammer', 'Yaw', 'Yawn', 'Auspiscious',
'Arbitrage', 'Arbiter', 'Arbor', 'Ardor', 'Ardent',
'Concrete', 'Conscious', 'Uptight', 'Uplevel', 'Friend',
'Depend', 'Deepend', 'Deepen', 'Decommit', 'Right', 'Now',
'Knowledge', 'Knight', 'Know', 'Knickers', 'Wow', 'Holy',
'Velocity', 'Rational', 'Quiet', 'Quick', 'Quite', 'Quotient',
'Wait', "Wither", "Whither", "Indignant", 'Jingle', 'Bells',
'Snow', 'Sled', 'Dinner', 'Open', 'Fancy', 'Farsighted',
'Farther', 'Giant', 'Ginormous', 'Giggle', 'License',
'Follow', 'Foil', 'Foe', 'Swing', 'Sweater', 'Sweetheart',
'Terrarium', 'Corn', 'Coal', 'Colocate', 'Coil', 'Likeness',
'Jail', 'Chill', 'Last', 'Holiday', 'House', 'Chip', 'Grain',
'Grand', 'Creek', 'Crumple', 'Crash', 'Crunch', 'Challenge',
'Patience', 'Wisdom', 'Creak', 'Point', 'Warmth',
'Imaginative', 'Imagine', 'Imaginative', 'Smokes', 'Calumny',
'Call', 'California', 'Can', 'Cat', 'Petition','Pelt',
'Random', 'Delicious', 'Cartwheel', 'Venetian', 'Lake',
'Work', 'Music', 'Trumpet', 'Arbitrary', 'Distance',
'Geography', 'Wrapper', 'Wren', 'Wrestle', 'Trestle', 'Treat',
'Trick', 'Trip', 'Trying', 'Opine', 'Father', 'Fallacious',
'Fallacy', 'Falling', 'Rain', 'Blue', 'Safe', 'Utility',
'Carpet', 'Imitate', 'Immigrant', 'Immigrate', 'Grate',
'Great', 'Snip', 'Sniff', 'Snoot', 'Swat', 'Hoot', 'Gig',
'Angel', 'Angina', 'Chocolate', 'Chick', 'Check', 'Chock',
'Chaff', 'Delist', 'Delightful', 'Delete', 'Jam', 'Debt',
'Set', 'Sex', 'Serrated', 'Realistic', 'Relative', 'Redo',
'Renege', 'Real', 'Regret', 'Tip', 'Tick', 'Tin',
'Tickle','Rip', 'Ride','Cull', 'Culinary',
'Caulk','Knee','Potato', 'Potential','Pore','Poor','Pie',
'Pickle', 'Piquant','Puppy' , 'Pump', 'Putrid', 'Power',
'Punt','Peck','Pester', 'Pert', 'Few', 'Febrile',
'Fickle','Fin', 'Fine', 'Fit','Baby', 'Barista',
'Bark','Bail', 'Backboard', 'Basil', 'Hello', 'Helium',
'Heckle', 'Hence', 'Low', 'Love', 'Long', 'Locked', 'Woe',
'Wombat','Worsted','Pants', 'Paint', 'Patent','Palpable',
'Conical', 'Tongue', 'Tarriff', 'Tax', 'Tange',
'Tahoma','Curve','Curt','Ceiling', 'Conundrum', 'Coffee',
'Haberdasher', 'Teamwork', 'Eritrea', 'Erudition', 'Titanium',
'Prepare', 'Predisposed', 'Pretend', 'Twang', 'Tweak',
'Polite', 'Dahlia', 'Dancing', 'Daft', 'Rope', 'Rodent',
'Luck', 'Luke','Rutabaga','Ruckus', 'Rubber','Woot','Frank',
'Aspire', 'Asinine', 'Aspersion','Attire', 'Attentive',
'Attract','Fracture','Whammy','Whether','Wick','Sophomoric',
'Socialist', 'Sonorous', 'Sound', 'Snarl','Street', 'Strict',
'Stammer', 'Stick', 'Stay', 'Stumped', 'Stew', 'Shut', 'Ship',
'Shush', 'Shapely', 'Shudder', 'Shambles', 'Sample', 'Samuel',
'Same', 'Trust', 'Grapple', 'Grin', 'Ski', 'Skip', 'Scuttle',
'Scrape','Skiff', 'Scamper', 'Science', 'Silence', 'Silo',
'Silt', 'Silky', 'Smooth', 'Smother', 'Special', 'Sputter',
'Split', 'Spline', 'Spin', 'Smile','Stiff','Stack','Stuck',
'Torque', 'Tone', 'Ton', 'Tornado', 'Hurricane', 'Hurry',
'Helpful','Weigh', 'Went', 'Weather', 'Wet', 'Sophia',
'Write','Wrought', 'Gift', 'Lick', 'List','Fraud', 'Viper',
'Vine', 'Vindicated', 'Voice', 'Vouch', 'Pound', 'Pouch',
'Through', 'Thickness', 'Thought', 'Thorough', 'Thrift',
'Though', 'Thanks', 'Thud', 'Tanks', 'Tingle', 'Tiny',
'Tents', 'Affirmed', 'Afterwards', 'Affair', 'Affront',
'Front', 'Back', 'Ballast', 'Frame', 'Tug', 'Tussle',
'Torrent', 'Together', 'Switch', 'Wedge', 'Rent', 'Insipid',
'Inside', 'Indoors', 'Infinite', 'Indecent', 'Decent',
'Into', 'Enter', 'Ensure', 'Insure', 'Endowed', 'Enthralled',
'Encourage', 'Cuff', 'Whiz', 'Wizard', 'Bullet', 'Bulwark',
'Bull', 'Billet', 'Blame', 'Blimp', 'Boil', 'Boneyard',
'Ballistic', 'Bonsai', 'Rote', 'Hone','Dote', 'Door',
'Dorothy', 'Donor', 'Dry', 'Drip', 'Drain', 'Dross',
'Cross', 'Crisp', 'Drafty', 'Pull', 'Deny', 'Donate',
'Drift', 'Dip', 'Educate', 'Editor', 'Elucidate', 'Elapsed',
'Erase', 'Erode', 'Cede', 'Cetacean','Frigid', 'Pleasure',
'Plow', 'Plumb', 'Jump', 'Julian', 'Joke', 'Jocular',
'Jovian', 'Jordan', 'River', 'Arrest', 'Arrive', 'Riven'
];
wordlist.sort();
function monkeyPatchAutocomplete() {
// Don't really need to save the old fn,
// but I could chain if I wanted to
var oldFn = $.ui.autocomplete.prototype._renderItem;
$.ui.autocomplete.prototype._renderItem = function( ul, item) {
var re = new RegExp("^" + this.term, "i") ;
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + this.term + "</span>");
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + t + "</a>" )
.appendTo( ul );
};
}
$(document).ready(function() {
monkeyPatchAutocomplete();
$("#input1").autocomplete({
// The source option can be an array of terms. In this case, if
// the typed characters appear in any position in a term, then the
// term is included in the autocomplete list.
// The source option can also be a function that performs the search,
// and calls a response function with the matched entries.
source: function(req, responseFn) {
addMessage("search on: '" + req.term + "'<br/>");
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp( "^" + re, "i" );
var a = $.grep( wordlist, function(item,index){
//addMessage(" sniffing: '" + item + "'<br/>");
return matcher.test(item);
});
addMessage("Result: " + a.length + " items<br/>");
responseFn( a );
},
select: function(value, data){
if (typeof data == "undefined") {
addMessage('You selected: ' + value + "<br/>");
}else {
addMessage('You selected: ' + data.item.value + "<br/>");
}
}
});
});
function addMessage(msg){
$('#msgs').append(msg);
}
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |