This article extends Implementing an Ajax.NET-based Lookup Server Control by firefalcon in order to provider support for multiple controls on the same web page. If you reference this work, you will see that it is a combination of the following technologies and projects:
- Ajax.NET - this provides the framework that allows AJAX to be easily implemented on the .NET platform. AJAX is a collection of technologies that allow server-side processing to occur without requiring postback to the client, usually a web browser.
- ASP.NET "Ajax Lookup" TextBox user control - this is the control that gets placed on the web page and ties everything together.
- Mozilla Firefox browser - there are many add-on extensions that are great for developing web pages.
- Firebug - this extension for Firefox detects code errors during execution and allows you to examine the XML-Http requests to and from the server. It does a whole lot more too.
Changes to the original "Ajax Lookup"
- Extra parameters were added for convenience, including
ItemStyleSpacing. Each parameter gets its own variable per control, so the
FontSize variable for the first control would be
1FONT_SIZE for the second control, etc. Most parameters have default values; see AjaxLookup.cs for these defaults.
InitQueryCode, called once per control.
- IE Bug: At some point during all the modifications, an old IE bug crawled in. This had to do with InitQueryCode being called before the entire page was rendered. To prevent this bug, I had to add a setTimeout call to delay the execution of InitQueryCode. You can find more information on this my searching the Internet for "IE Bug" and "setTimeout".
- The array returned by the lookup callback procedure must be an array of array pairs. E.g.:
[ ["Mary", "555-1212"], ["John", "976-1000"], ["Jim", "888-4141"] ]
- If there are too many results, you can return
["!more", "Too many results."]
as the last item of your array list. When !more is detected, the other string (in this case "Too many results.") will be displayed and will not be selectable as an option.
- Each time the mainLoop function gets called (frequency determined by the
setTimeout duration), it iterates through all of the axLookup controls. The more controls on the page, the more you may experience a slight "lockup" before results are returned. This is because the control in which you are currently typing has to wait its turn in the controls queue. This is why I've added a variable that allows you to specify the timeout for each web page. You may have to adjust this number based on the number of controls on the page.
setTimeout parameter. I took a look at it and didn't quite understand how it worked so didn't bother to re-implement it. Whether its re-implementation for multiple controls would avoid having to manually set the timeout, I do not know.
- There's only one place where I've called alternate code based on whether an IE browser is being used or not. I have not really tested the code on multiple browsers and cannot promise full cross-browser compatibility.
Using the code
- Install Ajax.NET; make sure you have the ajax.dll wrapper library in your .NET bin directory and the HttpHandler in your web.config:
<add verb="POST,GET" path="ajax/*.ashx"
type="Ajax.PageHandlerFactory, Ajax" />
- If you are using the compiled version of axLookup, make sure the axLookup.dll library is in your ./bin directory.
- Include these lines at the top of your HTML:
- Add an optional timeout (default is 1000 ms) for calling the main loop:
axl_timeout = 2000;
- Add one or more controls to your HTML:
<Ajax:AjaxLookup id="someId" Runat="Server" Width="70px"
ItemStylePadding="1px 0px 1px 0px"
DivBorder="2px solid red"
Note that leaving
DivWidth blank will make the box adjust to the correct size based on your text.
- 2006-06-08: Initial posting.