Forums

Hi Al,

I took a quick scan over you pastie and it looks like you are simply trying to make a remote Autocomplete call. I would recommend you look at some of the "remote" examples and not necessarily the FunctionDataSource example. The "Basic Remote" is a good start http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_xhr.html although it only uses a delimited text response.

Your code uses a somewhat old-fashioned method for Ajax calls with the "XmlHttpObject" calls. Why not use YUI's built-in and fantastic Ajax support? Maybe you were a little lost in understanding how to use YUI async connections, it is pretty straightforward -- the rest of this post will give you some pointers.

It looks like your ASP server 'PeopleAutoComplete.asp' returns TEXT data at the moment. To get the most utility I recommend you can change your server to return JSON or XML data. That way you can leverage the real power of YUI.

If you want to use YUI's Ajax support it is available through DataSource. To use remote requests with DataSource in addition to the 'datasource.js' library you also need to load
This will provide the YUI's asynchronous connection support.

Now for your ASP server, it would be most convenient for you to change it to return JSON data. The JSON data should be in the following format to be "legal";
The formatting is very important for the JSON response, you can use http://jsonlint.com/ to check it's legitimacy.

Also for your server, you would probably want to do the "searching" that the "matchNames" JS function of the example used on the server-side. For example you would simply do a string search of whatever is passed into the server (call it query_string) against the "lname", "fname" and "email" fields of your data. Then return the matching rows in their entirety back in the JSON object. I haven't done ASP in awhile so you are on your own for that! If you want "php" advice I can show you that method.

Assuming your ASP server is working well, then on the YUI DataSource and AutoComplete side you would do the following

The generateRequest method will send off whatever whatever is typed in the autocomplete box as sQuery on every keystroke. We simply provide a URL parameter identified in this case as "query_string". Say the user enters "da" in autocomplete, the generateRequest method fires off a GET request to your server at the following URL
and return the subset that matched "da" from your server logic. DataSource will properly construct this URL for you, and if you returned mixed data you could configure DataSource to parse dates, numbers, strings, etc..

The rest of the your code with formatting and highlighting functions in your pastie should work fine.

I've probably made it seem more complicated than it is. I recommend using YUI for your ajax requests via Connection and DataSource, they are invaluable tools and allow caching, parsing of the data, updating, etc... Using a browser debugger (Firebug, Chrome developer tools, etc..) is VERY helpful, especially when dealing with Ajax requests because you can set breakpoints and inspect what was sent and returned.

I may be able to put this working example publicly usable from my server if you need to see the whole thing.

Regards,
Todd

Todd,

Please ignore my last post I've managed to figure it out added "new" to the datasource declaration -



And added a "?" to the return part of generateRequest



I've now got the basic thing working except my AC results box contains the list of Ids where I want it to display -

"[lname] [fname] ([email])



Here is some sample output data -


My current source -
http://pastie.org/1888794

I'd be very grateful if you could give me a hand getting it to display.

Regards Al

Todd,

Thanks, yes thanks to you I'm very nearly there, I tried putting my existing functions in but it not liking it so I thought I must be missing a setting somewhere?

Latest code here http://pastie.org/1889128

Using firebug I've put a break point on line 71, when it breaks I put the mouse over "oResultData" it displays -

When I mouse over .fname is displays -


So it appears to me that it doesn't recognise the object?

Allan

Alan,

Quick update ... I think the problem with the .formatResult is related to a setting. If right after you instantiate the oAC you put "oAC.resultTypeList = false;" I think it will work fine. Read through the AutoComplete user page and search for resultTypeList and you will see this.

Todd

You'll have to start reading the docs yourself, okay? http://developer.yahoo.com/yui/autocomplete/#maxresults. Gotta get back to work ...