AJAX AutoComplete
Here I've used my Easy Ajax framework to build AJAX autocomplete. To start, add a little html to build the input field and a container for the suggestions when they appear:
A little bit of CSS will make sure everything looks right:
And to kick things off, include
And here's what it looks like in action:
Note: Using arrow keys and hitting enter seems to work fine in Firefox, but the design of the fool Live Search box I have integrated into the top of my page prevents this feature from working correctly in IE. To view on a page that is free of poorly design Windows Live code, please visit my auto complete demo page
<input type="text" id="input" style="width: 250px"/><br/>
<div style="position: absolute;">
<easy:ajax id="suggestions" url="AutoComplete.aspx"></easy:ajax>
</div>
AutoComplete.aspx accepts a single parameter named prefix and uses it to generate a response that looks something like this:<div class="autocomplete">
<div>Jim Reed</div>
<div>Jim Van</div>
<div>Jim Zaner</div>
</div>A little bit of CSS will make sure everything looks right:
#suggestions
{
position: relative;
}
.autocomplete
{
background: #D8EAFF;
border: solid 1px #55A6C8;
width: 200px;
}
.autocomplete DIV
{
padding: 2px 4px 2px 4px;
}And to kick things off, include
EasyAjax.js and AutoComplete.js and instantiate AutoComplete as follows:<script type="text/javascript" src="EasyAjax.js" ></script>
<script type="text/javascript" src="AutoComplete.js"></script>
<script type="text/javascript">
new AutoComplete(
document.getElementById("input"),
document.getElementById("suggestions")
);
</script>And here's what it looks like in action:
Note: Using arrow keys and hitting enter seems to work fine in Firefox, but the design of the fool Live Search box I have integrated into the top of my page prevents this feature from working correctly in IE. To view on a page that is free of poorly design Windows Live code, please visit my auto complete demo page