<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script class="jsbin" src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<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;
width: 42%;
height: 400px;
min-height: 100%;
border: Navy 1px dotted;
margin: 14px;
padding: 10px;
}
</style>
<meta charset=utf-8 />
<title>JS Bin</title>
</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>
<script>
var wordlist = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November',
'December'];
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);
}
</script>
</body>
</html>