A while back I had put some code together to generate an auto complete box using the VEMap.Find method. Recently I was asked if I had any examples of how to do this and ended up finding my original code which was originally written when version 5 of the map control was the current version, and at some point updated to use version 6.1. In any case it was code. With that I decided to clean it up a bit and make it simple.
The first step to creating the auto complete input box is to first create your base elements; Bing Map, textbox, search button…. After that you can wrap with div’s and position accordingly (Note: if it is going to display over the map make sure to have a high z-index). Once that is done add a onkeyup event to the textbox. When this even fires you will want to grab the text in the textbox and make sure it’s not empty. If it is not empty you can then use the VEMap.Find function to search for the input. The find callback can be used to grab the returned results. With the results you can then create html that contain all the suggestions. As a feature I split each location into pieces and bold the first word to make it look nice. In the html an onclick event is added to each result. When a user clicks on a suggestion it will then fire the SelectSuggestion function which populates your textbox with the suggestion
A side note, I used a array to concatenate my html in the FindSuggestion function. This was done for performance, however using “+” is fine too.
Here is the code:
|<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
var map = null;
map = new VEMap(‘myMap’);
//functionality for when user clicks on a suggestion
<input type="button" value="Find" onclick="Find();"/>