I am currently using jquery 1.3.2, some jqueryui 1.7.2 (tabs,
datepicker, resizeable), and Jörn Zaefferer's autocomplete plugin
1.0.2 (http://docs.jquery.com/Plugins/Autocomplete).  All work
together nicely.

I've been working on getting my autocomplete inputs working properly.
I started to make progress when I found this sample, which is not
linked to anywhere on Jörn Zaefferer's site.  This should really be
linked to on the main page for the autocomplete.  The linked demo page
from his home page does not include any json samples, instead the
server data returns pipe and newline delimited records.

JSON AJAX sample:
http://view.jquery.com/trunk/plugins/autocomplete/demo/json.html

My only problem is that I am not able to get the formatMatch or
formatResult options to work as mentioned in the documentation.  They
are never hit during the matching process or after I select an item to
put in the textbox.  I am using firebug to debug, and the breakpoints
on those functions are never hit, but fortunately formatItem is hit.

My solution was to duplicate my formatMatch logic and formatResult
logic in the parse function option.  If anyone can see why my
formatMatch and formatResult functions are not hit, please let me
know.

Here is the code (which works):
jQuery(function(){
    $('#profile-tabs_addresses_grid_b_a_PostalCode').autocomplete
('http://test.mydomain.com/locality/postalcodes/', {
        minChars:1,
        delay:400,
        cacheLength:100,
        matchContains:true,
        max:10,
        formatItem:function(item, index, total, query){
            return item.PostalCode + ': ' + item.Region + ', ' +
item.City + ', ' + item.Country;
        },
        formatMatch:function(item){
            return item.PostalCode;
        },
        formatResult:function(item){
            return item.PostalCode;
        },
        dataType:'json',
        parse:function(data) {
                        return $.map(data, function(item) {
                                return {
                                        data: item,
                                        value: item.PostalCode,
                                        result: item.PostalCode
                                }
                        });
                }});
});

here is the json data that comes back from the data url ( whitespace
added for easier viewing ):
[
        {City:"St. Louis", Country:"USA", PostalCode:"63103", ID:3,
Region:"Missouri"},
        {City:"St. Louis", Country:"USA", PostalCode:"63109", ID:1,
Region:"Missouri"},
        {City:"St. Louis", Country:"USA", PostalCode:"63119", ID:2,
Region:"Missouri"}
]

When I type a 6 in the postal code box, it shows all three options
properly formatted as:
63103: Missouri, St. Louis, USA
63109: Missouri, St. Louis, USA
63119: Missouri, St. Louis, USA

and when I select one the textbox receives just the selected zip/
postal code.

Reply via email to