ASP.NET Ajax Beta: AutoCompleteBehavior without a Web Service

61 Comments

• As a committer on the Atlas Control Toolkit project over on CodePlex, mind if I merge this in (with you credited as author, of course) and use it in the samples?
  

• Marc -- thanks much for the offer, but it depends on the futures CTP because it inherits from the AutoComplete behavior/extender in it. The toolkit only depends on beta2 if I'm not mistaken.
  

• Excellent point... I'll ask over on the list...
  

• Nice control. Still haven't figured out why MS created it to only work with a webservice. Seems limiting. Works fine - but - not able to use the Callbacktargetid. If I leave out it works fine just not able to format the list. If I add in the control doesn't work. I have both Beta2 and futures CTP installed. I created the dll and referenced in my project. Any ideas? Thanks ..
  

• Ed -- I don't follow your scenario. The CallbackTargetID is meant for scenarios where you want a different control to handle the callback. It could be that isn't working as planned. But I don't understand what you're saying about formatting the list. Perhaps what you mean to use it the CompletionListElementID?
  

• I tried both since I wasn't sure what the CallbackTargetId was for.  When I use the CompletionListElementId I get a Javascript error on page load - 'constructor' is null or not an object.  I tried a DIV and Panel control.  For the list I'm referring to the dropdownlist of results.  If I don't use the property, the control works. I just can't format the list of results.  It all works if I use the standard Atlas implementation with a web service.
  

• trying to get this thing to work... am I supposed to assign values to the AutoCompleteEventArgs? Looking for a project to look at.
  

• figured it out, sorry for my lame brain.
  

• Yes :) You assign the list of items to the event args. The number of items you return should match the 'count' parameter you are passed, but it doesn't have to. Obviously there may be less results, but it doesn't complain if there are more, either.
  
  Note that since its an event, it would be possible for different listeners to build up the completion list separately, without them having direct knowledge of each other. Or one can modify the results of another, remove some, change their order, etc... whatever it wants.
  

• I keep getting Sys.InvalidOperationException when using completionElementID. Has anyone a fix for this?
  
  Everything else working great. Love the ease of this thing compared to the older version. Great job!
  
  - Hal
  

• I am getting the same error as Hal with using completionElementID. I've been unable to alter to code to make this work. Anyone with ideas?
  

• Hi,
  I got this example working. Changed it and it's still working.
  But its now what I was looking for. Do you know of any example that uses the web service with more than the two default params prefixText and count?
  

• I've seen solutions that allowed you to pass more than one parameter, but that was back in the CTP days and I'm not sure what came of them.
  
  Exactly what parameters are you hoping to pass? Using this control you can access the page state from the callback, so you can either avoid needing to pass a parameter, or you can gather the data you need, then manually call a webservice from the callback event.
  

• UPDATE: I know about the broken CompletionListElementID property. I will post an update with a fix as soon as I can.
  

• Ajax Extensions (Atlas) RC 1 Released!.... has anyone tried this great control on it?
  

• I keep getting "Unknown server tag 'i88:SmartAutoCompleteExtender'" when trying to view a page with this control. I have the project referencing a built Infinity.web.dll and the register tag at the top of the page. Anyone run into this?
  

• Are you also referencing Microsoft.Web.Preview.dll?
  

• Thanks for the quick response! Yes, I do a have a reference to Microsoft.Web.Preview.
  
  Infinity.Web, Microsoft.AtlasControlExtender, Microsoft.Web.Atlas, Microsoft.Web.Extensions, and Microsoft.Web.Preview are the other references in my project.
  

• You shouldn't have both Microsoft.Web.Atlas and Microsoft.Web.Extensions, they are different versions of the same thing. Just Extensions is what you need. You don't need AtlasControlExtender unless you're using something in there for some other purpose (it isnt needed by the autocomplete extender). I take it that is the Atlas Control Toolkit, correct? Make sure you have the correct version of the toolkit for the atlas version you are using (looks like beta2).
  
  If none of that helps... what is your tag mapping look like? You said you get this error when you view the page -- do you mean in the designer or at runtime? If its only in the designer what happens when you try to run the page anyway? Is the Microsoft.Web.Preview.dll and Infinity.Web.dlls in the bin directory of your application (extensions is typically in the GAC)?
  
  Also, what version of atlas did you build Infinity.Web against? Make sure its the latest (Microsoft.Web.Extensions). Don't reference both Extensions.dll and Atlas.dll.
  

• Ah, thanks for clearing that up a bit. I figured it out finally. In addition to your tips, my web.config was all messed up (not beta 2 ready). Now, I just have to figure out the syntax to have the _autoCompleteCallback be called as you type in the textbox (in vb.net) and then i can really start playing.
  
  Not sure how to turn this into the appropriate vb.net version
  this.txt1.AutoCompleteCallback += new I88.EventHandler(txt1_AutoCompleteCallback);
  

• xilent1 -- I wish I were more familiar with VB.NET syntax, but its basically whatever the event hookup usually looks like. So, same way you hookup to a Button Click event, for example.
  
  Private Sub MyHandler(.....) Handles txt1.AutoCompleteCallback
  ...
  End Sub
  
  With the usual event handler stuff in the parameter list, except with a special event args. For VB I think thats:
  
  ...(ByVal sender as System.Object, ByVal e as AutoCompleteEventArgs)...
  
  To return completion items, assign the string array property on the 'e' event args.
  
  e.CompletionItems = myStringArrayOfSuggestions
  
  I hope that at least points you in the right direction.
  

• I am running a sample using this extender, AJAX RC1 and AJAX Futures December CTP where the AutoCompleteExtender is found. I managed to get it all working but one aspect. The styling of the list does not work. Whenever I use CompletionListElementID (aka DropDownPanelID) to assign the panel that has my style I get a Javascript exception telling me that completionElementID is not a property.
  I dag in the code and it turns out that the property is not one of the ones exposed in the AutoCompleteExtender. I even tried to change it to other things at first in the SmartAutoCompleteExtender code for GetScriptDescriptors to no avail.
  Has anyone made this work?
  

• Finally got the style working. I had to change the method GetScriptDescriptors in SmartAutoCompleteExtender so that it adds the element property called completionList for the property CompletionListElementID. I can then assign the ClientID of my Panel to this property. This can only be done in code behind in the Page_Load event. Only then it works.
  
  Also, another thing I noticed is that if you have more than one AutoCompleteExtender in a page and set CompletionInterval to something close for each instance, the result list flickers quite a bit and the selections don't remain highligheted. You can still pick an entry with the mouse, but the highlight flickers uncontrollably so making a selection with the keyboard is not possible.
  

• My issue with flickering is now solved. I had set the CompletionInterval to 10, which seems to be too low. If I set it to 100 there's no more flickering. I manage to have 5 controls on the same page and no problems.
  
  Now that I have it all working I can focus on my real goal here. The default implementation allows for the preparation of a string[] to feed the completion list from which a user can select an item, which then gets set to the Text property of the TextBox control. This is all great. What I really need tough is to get the associated identifier of a selected item. My interest in using the SmartAutoCompleteExtender logic with a TextBox is to replace using a DropDownList. The selections I need are from a list of 80,000+ possible records!
  
  So, I created a custom TextBox control that embeds the SmartAutoCompleteExtender. I have it working so that I handle the AutoCompleteCallback inside my custom control and I then raise my own event to allow the page to provide a list of (Value, Text) elements. From this list I simply extract the Text and return it as a string[] in the e.CompletionItems of the AutoCompleteCallback event arguments.
  
  By doing this, my intent is to keep the last list from which the user may have selected an item so I can extract the identifier from it later on. I am trying to do this in the control state. However, because the AutoCompleteCallback happens outside of the context of the TextBox I am not able to trigger the SaveControlState logic of the TextBox. Any ideas?
  

• lvildosola -- you said you are handling the event inside your custom control, why can't you do what you need to do from that handler?
  
  Regardless, you can set the CallbackTargetID on the smart extender. It allows you to make the callback occur in a control other than the extender. You could set it to the client ID of your custom control, then you can handle it yourself. You'd have to re-implement the logic of raising the event, parsing the argument, etc, but that should be pretty easy.
  

• "lvildosola's" solution for the CompletionListElementId worked well - I was even able to assign the property in the page itself and not in the code - Thanks !!
  

• InfinitiesLoop, I am doing just what you are describing. I am not changing the SmartAutoCompleteExtender in any way, other than to fix the problem mentioned. What I am doing is simply creating a composite control that renders the TextBox, a Pane (for styling), and the SmartAutoCompleteExtender. That way I don't have to repeat the same code multiple times. It works really well.
  
  The problem I have now is keeping the list of elements resulting from the search. Because I am embedding the controls I am not getting a necessary SaveControlState call and therefore my list is not persisted as part of the PostBack in the control state. I even tried persisting the list in the view state to no avail. I will figure it out soon enough. I will try to get it working using independent controls first before attempting to combine them in a composite control.
  
  Perhaps the way to go is to enhance the SmartAutoCompleteExtender so that it not only returns a list of strings but also a list of associated identifiers. Kind of like the Value/Text pair tha is used for the DropDownList control. I don't know enough about extenders to jump into it right now. But perhaps later.
  

• Thanks for clarifying the callback logic more for me. I agree session is not something I want to use for this. I also agree that there are a number of things that would need to be considered in order to make this work "correctly." All the (possible) error conditions that you mentioned are definitely valid.
  In my particular case, I need to allow the user to search from a list of over 80,000 entries. Normally, I do this through a lookup mechanism where the user would specify parts of what they are searching, click search to get a subset from which they would then select. But this is more suited when dealing with multiple search criteria and not just one. The goal is to make it fast for the end user.
  In the case where they simply need to pick one entry from a large list the AutoCompleteExtender seems the logical way to go. But you are right, I need to ensure they pick from the list and not enter something invalid, which makes it deviate from the control's original intent.
  With this in mind though, what would be a valid alternative to what is described here?
  

• lvildosola -- well, like I said I can definitely see that the features you want would help, despite it being sort of against the nature of the control. However, even with that solution, I think it may still be difficult for the user to find the entry they want. Because you have so much data, the user would probably have to type most of what they want before it is narrowed down enough anyway.
  
  I implemented a similar feature once -- the textbox was someone's name, among a database of over 100,000 people. Names are fairly unique, so it was simple enough for the user to enter the last name of the person, and then proceed with the rest of the forum as if that was enough. If there was only 1 match, we proceeded without prompting. If there were more, we listed the top 10, which they could click on. If that still wasn't enough (as in the name Smith), they could include all or part of the first name, or enter the the last 4 of their social.
  
  I don't know the nature of your data, but if theres something about it that is fairly unique across the data space, those semantics may work better than you think. If you search for the name of a musical album, depsite there being so many albums out there, you pretty much find what you need quickly. If not... then maybe you can find a way to further categorize the data? Give the user something to search by? For example, in my scenario, we could have added a State field for where the person lives. There may be 2,000 smiths, but only 100 of them live in Washington, for example. I think more finely organized data is key to a good solution... everything else is just making up for the data being unorganized. If the data is outside your control, then I guess you have no choice but to do all you can to improve the selection logic.
  
  You could simulate what you want by having a repeater inside an update panel. As you type in the textbox, the repeater is re-databound with search results. That gives you ultimate flexibility over the look of the results, and you could hang on the the IDs too. Since the user would have to click on one to continue, you don't have to worry about their input matching a result.
  

• In fact, my case is pretty straight forward. All of these 80,000+ records are unique for selection. The user is used to entering a code representing a customer in a previous system. This code is unique. Therefore, what I am doing is making this data-entering simpler by presenting the top 10 entries once the user types 3 characters. This way the user completes the entry by selecting the match, if any. We don't allow codes that are not in the database. It is just a way to help them select the entry quicker without a lengthier lookup mechanism.
  
  In my case though, we have to respect data integrity and therefore link to a company by its identifier and not its code. Hence, the need to track the ID when the user selects the code. The alternative of course is to simply attempt to store the code, find that there's no matching ID and throw an error to the user. But that means hitting the database again for each instance of such a control. Not optimal but it would work. In fact, that is what I do now during the validation logic before persisting the contents of a form. I call the same search mechanism but with the complete code that will then return one result whose ID is then used.
  
  In any case, thanks for your input. It has been very helpful. I don't know enough of what would be required to change in the SmartAutoCompleteExtender control to support what I describe, but perhaps you can take a moment to explain your vision and I could trake a crack at it. Cheers.
  

• Hi,
  
  I'm trying to use the control to retrieve a list of autocomplete cities according to a dropdown selected state.
  
  I want to be able to set a state and then get its cities via autocomplete. I am having a problem that seems like a caching issue. When selecting a state, I clear in code the city text box (that is extended) hoping to start a new callback from scratch. This does not happen.
  
  What am I doing wrong?
  
  Thanks, Edmund
  
  
  
  Here's the aspx:
  
  
  
  
  here's the codebehind Page_Load:
  protected void Page_Load(object sender, EventArgs e)
  {
  States.Attributes.Add("onchange", "var city=$get('City'); city.value = ''; city.focus();");
  }
  
  
  and here's the callback:
  protected void CityExtenderCallback(object sender, Infinity.Web.UI.WebControls.AutoCompleteEventArgs e)
  {
  Services.ZipCodeServices s = new Services.ZipCodeServices();
  e.Prefix = City.Text;
  e.Count = 6;
  e.CompletionItems = s.GetCitiesByState(States.SelectedValue, e.Prefix, e.Count);
  }
  
  

• Edmund -- ahh, I see, of course :) The caching is definitely pretty simple -- either on, or off. It would be nice if it supported some sort of binding syntax where by the value of the bind scoped the cache. So you could keep the cache unique to each state...
  
  It doesn't have a public API for clearing the cache, but javascript being what it is, you can maniuplate its private fields all you want. Just be wary that anytime you do this, you're doing something that may be broken in future builds.
  
  That being said, try this :)
  
  obj._cache = null;
  
  Where obj is the behavior. You can get the behavior one of several ways... the most straightforward is $find(id), where the id is a combination of the target element's client ID, $, and the behavior name:
  
  $find("$AutoCompleteBehavior");
  
  You can also get it off the element itself:
  
  $get("<textboxClientID").AutoCompleteBehavior
  

• Great extension!
  
  However, I couldn't get the box to accept styling using the method proposed above. If I modify the code by adding
  
  sbd.AddElementProperty("completionList", this.CompletionListElementID);
  
  I still get the javascript error when running my app. Am I even doing it correctly?
  
  Also, is there any way to get cross browser compability? As of now, Opera renders the box positioned incorrectly.
  
  Thankful for any help!
  

• Did you set the CompletionListElementID property? You need to assign it the ClientID and not the ID property of the panel.
  

• I have a master page where I define the ScriptManager instance. However, doing it this way causes the SmartAutoCompleteExtender to fail when viewing a page that holds it via the Designer. Any ideas how to make it work in the Designer without having to add a ScriptManager instance in the page itself?
  

• Yes, I set the CompletionListElementID to the clientID of the panel, something like this:
  
  auto1.CompletionListElementID = Panel1.ClientID;
  
  The extension has been built using VS 2005 Professional with the following lines added:
  
  if (!string.IsNullOrEmpty(this.CompletionListElementID))
  sbd.AddElementProperty("completionList", this.CompletionListElementID);
  
  The correct dll is referenced, but it gives me javascript errors, meaning that AJAX breaks alltogether.
  
  The IE javascript error message is that "_events is null or not an object" and the same for _constructor.
  
  
  Probably some simple error, but thankful for help anyway :)
  

• Luxspes -- are you using a custom completion list or just letting it build its own? If you are using your own, is it inside the update panel too?
  
  Either way I'm pretty sure its a bug in the behavior. When it disposes itself it should be sure to dismiss the popup behavior. The popup behavior will be disposed eventually too, but all it does is remove itself from the element, it doesn't remove the element itself. So the code is going to have to know whether you're using a custom list or not... because if you are, it shouldn't remove it from the dom. Either way it should hide it. Another challenge with that is that the popup behavior might be disposed first.
  
  try adding this to the Smart behavior (it may already have a dispose, in which case add this code to it)
  
  dispose: function() {
  i88.SmartAutoCompleteBehavior.callBaseMethod(this, 'dispose');
  document.body.removeChild(this._completionListElement);
  }
  
  I didnt actually try this code so forgive me if theres a mistake in it, but the idea is to remove the completion list element from the DOM when the element is disposed. This assumes you are NOT using a custom element for the dropdown, in which case it shouldn't be removed, simply hidden.
  

• Hi,
  
  Is there an estimated time frame for releasing this great control compiled against the recently announced AJAX RTM?
  
  Thanks,
  Edmund
  

• Alrighty... so The Good News is Atlas RTM is out the door. The Bad News is the AutoCompleteExtender is no longer a part of the Futures CTP, it's new home is the Atlas Control Toolkit.
  
  Actually, that is also good news, since the control may now benefit from the community. It also means you don't need a pesky reference to Futures if all you needed was ACE, which is especially nice if you were already using the Toolkit anyway. If you aren't already using the toolkit, now would be a good time :)
  
  The real bad news is I'm super busy and won't be able to just sit down and get this control working against the toolkit extender (as well as fix a few bugs as described above), at least not this week.
  
  If someone is up to it and they manage to compile it against the toolkit send it over and I'll give you credit with the link of your choice :) Just be prepared to answer 'why doesnt it work' questions from other readers :) It should be pretty easy.. the extender didn't change much, it just moved from one assembly to another.
  
  Ideally my long term plan for the SmartAutoCompleteExtender is for it not to derive from anything, but rather be an extender all on its own. That way it can do its dirty work in the best possible way, crazy features and all.
  

• In order to run this control with the RTM release you will need to make 2 changes to the code.
  1. In SmartAutoCompleteBehavior.js, go to the end of the file and replace the last line with the following. Note the namespace of the base AutoCompleteBehavior has changed.
  Sys.UI.Controls.SmartAutoCompleteBehavior.registerClass(i88.UI.SmartAutoCompleteBehavior&#39;, AjaxControlToolkit.AutoCompleteBehavior);
  2. In SmartAutoCompleteExtender.cs, go to the method GetScriptReferences() and change the first reference line with the following.
  references.Add(new ScriptReference(&quot;AjaxControlToolkit.AutoComplete.AutoCompleteBehavior.js&quot;, &quot;AjaxControlToolkit&quot;));
  If you made the necessary reference changes to the new dlls and updated your Web.config you should be up and running in no time.
  

• SANSAN, your fix worked really well. I had noticed this same issue but I did not put any emphasis on fixing it since I had other things to cover. In any case, good tip.
  

• Please note there is an error in my previous post. The line should read:
  
  i88.UI.SmartAutoCompleteBehavior.registerClass('i88.UI.SmartAutoCompleteBehavior', AjaxControlToolkit.AutoCompleteBehavior);
  
  Sorry for the copy/paste error.
  

• How do you change the style of the div that gets populated with the results? If I want to change the color, font or size of the text. Thanks
  

• Bilal - the base extender/behavior has some hard coded styles that it applies to the div, even if you use your own div. Unfortunately there is no great way to overwrite these changes, even if you apply a css rule. You could try changing the style of the div from the pageLoad() function.
  
  function pageLoad() {
  $get('id-of-the-div').style.foo = bar;
  }
  
  Or if you are writing a component you should use the load event instead:
  
  Sys.Application.add_load(function() {
  $get('id-of-the-div').style.foo = bar;
  });
  

• In order to override the AutoCompleteEntender's default style for its list you need to override the initializeCompletionList() function. I just tried the following override to accomplish what is requested.
  
  (Note: an option is to specify all the styles you want in a div and pass its ID to the CompletionListElementID property of the SmartAutoCompleteExtender. Then simply use this style and override instead of hardcoding your own values. This would be a better implementation.)
  
  // Overriden to support overriding all styles, if required,
  // of the auto-complete list.
  initializeCompletionList: function(e)
  {
  // Allow the base to initialize the styles before attempting
  // to override them. This is required since some handlers are
  // initialized.
  i88.UI.SmartAutoCompleteBehavior.callBaseMethod(this, 'initializeCompletionList', [e]);
  
  // Override the color and background color of the items in the list.
  this._textColor = 'Red';
  this._textBackground = 'Yellow'; // Not Recommended! ;-)
  
  // Use the style from the element to override the rest.
  // The only style that cannot be overriden this way is
  // the width. For the width you will need to override
  // the _update method.
  with (e.style)
  {
  // Override other whatever styles you want.
  fontFamily = 'Verdana';
  }
  },
  

• I need some help.
  I am using ASP.NET AJAX 1.0 RTM and I made the changes to source code and it compiles properly.
  
  I register the tag and put this code on my page
  
  
  I then get a javascript error in IE.
  What am I doing wrong?
  Do I have to copy the SmartAutoCompleteBehavior.js to somewhere in my project?
  

• yzidell -- what is the javascript error?
  
  The script should be embedded in the dll. You should see on the page a reference to a ScriptResource.axd path (probably several). If everything is working as it should, one of them should return the SACE script.
  

• Have you considered handling the TextChanged event, adding the TextBox to an UpdatePanel to minimize flicker during postbacks, add an onchange javascript handler to trigger a postback using javascript? This way you would cause the same effect without modifying the control.
  
  If you really want to modify the control, override the base initialize function, call the base initialize first then add your onchange handler. When the onchange event happens simply cause a postback. You still want to handle the TextChanged event on the server side.
  
  In either case, once you receive the TextChange event you can now update the rest of your controls.
  

• Please note: if you are using the WebService method with the SmartAutoCompleteExtender, you will need to make an additional change to the code in SmartAutoCompleteExtender.cs. You will need to change the method GetScriptDescriptors() and replace the word &quot;serviceURL&quot; to &quot;servicePath&quot;. This is another change they have made to the AutoCompleteExtender in the AJAXControlToolkit as part of the APS.NET AJAX 1.0 RTM release.
  

• Would you plesae share your SmartTextBox with built-in SmartAutoCompleteExtender in AJAX RTM? A lot of times, we add controls at run time, not at design time. I tried both approaches: Inheriting textbox and creating composite control include a textbox and autocomplete extender, neither worked.
  Please help, many thanks!
  

• ial -- if you'r running against RTM and the Toolkit, use the ID not the ClientID of the control. Not sure if thats what is causing your problem but it can't hurt.
  

• I've just updated the AjaxControlToolkit to 1.0.10301.0 (march release) and now i get an error when using the SmartAutoCompleteExtender:
  
  Could not load file or assembly 'AjaxControlToolkit, Version=1.0.10201.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)
  
  Looks like it's looking for my previous version of the AjaxControlToolkit.
  

• Did you recompile the project against the new toolkit version?
  

• Of cource. After compiling the project it worked just fine.
  

• How to implement the same for jsp pages
  

• Microsoft's AutoCompleteExtender was tantalizingly close to what I needed, but in the end was next to useless for me because I needed to access the page state to build the completion list.
  
  Not knowing JavaScript very well (nor C# for that matter, yes I'm one of those reviled part-time VB programmers) I wasn't successful modifying the web service to do what I wanted. Actually, I'm not sure what I was trying to do would even be possible. At that point I started searching for other options and found this page.
  
  Anyhow, after a little work getting my references straight it works great! Again, thanks for taking the time to do this and allowing us to benefit from your work :)
  

• How do I return multiple values and when selected the value followed by a delimiter is shown?
  
  So if my list returns:
  
  Jack1:888
  Jack334:999
  
  I only want to show in the selected items:
  
  Jack1
  Jack334
  
  then when you select Jack1 - i populates 888 in a hidden textbox.
  
  You know what I mean?
  

• hi, i am using the SmartAutoCompleteExtender control in my web app. here is what i am doing.
  
  .......some logic
  args.CompletionItems = lstStudentId.ToArray();
  where lstStudentId is a list of type string.
  
  when i execute the code on UI side the SmartAutoCompleteExtender control shows the binded values as "undefined". When i debug the code i found that the lststudent hold valid sting values. I dont know why i am seeing the undefined values? any idea?
  

• PLease Help
  Hi i am trying to getit working SmartAutoCompleteExtender control but still no luck. i am getting 'i88 is undefined'.. Any ideas greately appreciated
  
  
  

• This is a great extension of the AutoComplete Extender.. One thing missing that would make my world... Add an "OnListItemSelected" event handler of some sort. So if someone selects something from the returned list, a method in the designer's app can be called (such as to automatically fill in other fields once an item from the list is selected, or completely typed out.)
  

• I really think it would be good to support multiple values in the completion list. For example, I want it to pop up a list of people that a request could be from. When an option is selected, it should populate the name into one textbox and the email into another. If they type someone who is not in the list then they should type an email themselves.
  
  If I could add a delimited list of values to the completion list, and then update the various textboxes with those items that would be great.