As you can see this is the kind of data that is searched for everyday in SharePoint (could I have accessed some kind of SharePoint API that returns real ones, sure but I knocked this up quickly).
Then I created a Content Editor Web Part on my page to paste the following JavaScript into:
Code (Script) <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="/resources/demos/style.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function()
{
var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body> <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'><listName>Microsoft
employees</listName><viewFields><ViewFields><FieldRef Name='Employee' />
</ViewFields></viewFields> </GetListItems> </soapenv:Body> </soapenv:Envelope>";
//Make a call to the List WebService using the SOAP envelope described above.
//The URL is fixed to a Specific Site Root. Feel free to change this
//to your own fixed root or do some jscript voodoo to figure out where
//Of course in 2010 you can do this with the Client Object Model, or hit
//the list rest Service and return JSON, so enabling jsonp cross site calls.
$.ajax({
url: "http://SvrName:7070/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
contentType: "text/xml; charset=\"utf-8\"",
success: function( xmlResponse ) {
var domElementArray=$( "z\\:row", xmlResponse );
var dataMap = domElementArray.map(function()
{
return {
value: $(this).attr('ows_Employee') ,
id: $(this).attr('ows_Employee')
};
});
var data = dataMap.get();
//Find the Sharepoint Portal Search Box (this is a poor selector, but it is not properly named by sharepoint, well it is but INamingContainer getrs in the way)
$( "#tags" ).autocomplete(
{
source: data
});
}
});//.ajax
});//docReady
</script>
<div class="ui-widget">
<label for="tags">
Microsoft employees</label>
<input id="tags">
</div>
This could easily be additional page head stuff or master page stuff or in 2010 a custom action for a script and so on, but here it’s a CEWP.
Some of the prerequisites for using jQuery UI Autocomplete are: