jQuery自动完成获取价值

Question

auto complete is working fine. I put a hidden value for saving the value of auto complete by this method my code :

$("#cityOp").autocomplete({
        source : function(request, response) {      

        var city_value = jQuery("#cityOp").val();


        $.ajax({
            url: "city.html",

            dataType: "json", 
            data : {
                filter : city_value
            },           


            success : function(data) {

                response(jQuery.map(data.cities,function(item) {
                                    return {
                                        value : item.locationName,
                                        key : item.locationId

                                    };
                                }));
                },
select : function(event, ui) {

         $("#theHidden").val(ui.item.key) ;
    }

    }); 

then I want to get this location Id for saving the value of location , so I tried the as:

save(){
var locationValue=$("#theHidden").val(); 
//other saving codes
}

but I got here locationValue is undefined .

How I get the this hidden value in save function ? autocomplete function is in document on ready and save function is in a js.

Answer 1

this solved

select : function(event, ui) {

        setLocationValue(ui.item.key);
    }

in js

var locationValue;

function setLocationValue(value){
    locationValue=value;
}

Answer 2

In the response of the $ajax method you are mapping the data to a JSON object with only two properties, value and key.

Then, in the select, you are using a property that doesn't exist anymore.

If you want those original values to still exist, you should map them as well. Alternatively, you could save the id to the hidden field like this:

$("#theHidden").val(ui.item.key);

Let me know if that doesn't work for you.