CODEWITHSUNDEEP
jqueryjquery-uiautocomplete
DaFoot
DaFoot

Reputation: 1567

How to modify value of jQuery ui autocomplete selection (or suggest alternative)

I'm trying to create an autocomplete function with an address lookup using jQuery autocomplete. Asynchronous requests as user types isn't really feasible this time, I'm using JSON that is written into the HTML (I know :( !).

The autocomplete seems to work, in that addresses get added to the dropdown and can be selected, but the problem is that I want to chop up the selected value and change the value in the input with the autocomplete on it.

eg if I have a field called "address1" that has an autocompletye on it, when user selects an address (eg "2 a road, some suburb, some town") I just one the first part to be left in the #address1 field, not the full address.

var addressLines;
    var dataSource =  jQuery.parseJSON($('#collectionAddresses').text());
    if($('#collect-address-line-one')) {
        $('#collect-address-line-one').autocomplete({
            delay: 5,
            minLength: 1,
            select : function(event, ui){ // fires when user selects an item from the address dropdown, with click or enter for example
                addressLines = ui.item.value.split(",");
                var pCode = $('#collectionPostcode').val();
                $('#collect-address-line-one').val(addressLines[0].trim());
                if(addressLines[1] != null) {
                    $('input#collect-address-line-two').val(addressLines[1].trim());
                    if(addressLines[2] != null && addressLines[2].trim() !== pCode) {
                        $('input#collect-address-line-three').val(addressLines[2].trim());
                        if(addressLines[3] != null && addressLines[3].trim() !== pCode) {
                            $('input#collect-address-line-four').val(addressLines[3].trim());
                        }
                    }
                }
            },
            close: function(){ // fires when the autocomplete drop down closes, eg client deletes all input or clicks away from field
            },
            source : dataSource
        });
    }

I did have the code that chops up the values in the 'close' event function, which seemed to work, but if the user deleted the content from the first input then the autocomplete would force the value back in there so user couldn't start again if they made a mistake.

So I moved that code to the 'select' event, which works except I can't change the value in the input to the chopped string, only the full address value from the autocomplete widget.

Upvotes: 1

Views: 1907

Answers (2)

alex89x
alex89x

Reputation: 479

That happens because, by default, in the jQuery UI Autocomplete code, select event replaces the whole content of the input box. If you return false, you prevent this behaviour to happen.

Upvotes: 2

DaFoot
DaFoot

Reputation: 1567

After reading the answer given here: How do I override the default behavior of select: within Jquery UI Autocomplete?

I tried returning false in the select function, now seems to work as I'd hoped.

Upvotes: 0

Related Questions