Lord Relix Lord Relix - 6 months ago 12
Javascript Question

Force AutoComplete to depend on another's result

I am trying to have two AutoComplete textboxes, with the second one being dependent on whatever value is input in the first one.

Full AutoComplete:

<script>
var stateId = 0;
$(document).ready(function () {
$.ajax({
dataType: "json",
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: '/api/services/app/generics/StateList',
cache: true,
success: function (data) {
var array = $.map(data.result, function (item) {
return {
label: item.stateName,
value: item.id
}
});
$("#StateName").autocomplete({
source: array,
minLength: 1,
change: function (event, ui) {
if (!ui.item) {

event.preventDefault();
$("#StateName").val("");
}},
open: function () {

},
close: function () {
},
focus: function (event, ui) {
return false;
},
select: function (event, ui) {

event.preventDefault();
$("#StateName").val(ui.item.label);
stateId = ui.item.id;
},
}
);
},
error: function (data) {

}
});
});
$(document).ready(function () {
$.ajax({
dataType: "json",
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: '/api/services/app/generics/CityList/' + stateId,
cache: true,
success: function (data) {
var array = $.map(data.result, function (item) {
return {
label: item.cityName,
value: item.id
}
});
$("#CityName").autocomplete({
source: array,
minLength: 1,
change: function (event, ui) {
if (!ui.item) {

event.preventDefault();
$("#CityName").val("");
}},
open: function () {

},
close: function () {
},
focus: function (event, ui) {
return false;
},
select: function (event, ui) {

event.preventDefault();
$("#CityName").val(ui.item.label);
},
}
);
},
error: function (data) {

}
});
});
</script>


Basically depending on the values of the first text box should the values of the second one appear. Say Florida is selected, then the names of Florida Cities should appear in the second one when someone searches. I have absolutely NO idea on how would I do this. Javascript is not my forte.Any help would be great!

EDIT: THis is my finalized, working script, in case someone is suffering as I am!

<script>
$(document).ready(function () {
$.ajax({
dataType: "json",
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: '/api/services/app/generics/StateList',
cache: true,
success: function (data) {
var array = $.map(data.result, function (item) {
return {
label: item.stateName,
value: item.id
}
});
$("#StateName").autocomplete({
source: array,
minLength: 1,
change: function (event, ui) {
if (!ui.item) {

event.preventDefault();
$("#StateName").val("");
}},
open: function () {

},
close: function () {
},
focus: function (event, ui) {
return false;
},
select: function (event, ui) {

event.preventDefault();
$("#StateName").val(ui.item.label);
$(function () {
$("#CityName").autocomplete({
delay: 100,
minLength: 2,
cache: true,
source: function (request, response) {
$.post("/api/services/app/generics/GetCityByState?stateId=" + ui.item.value, function (data) {
// data is an array of objects and must be transformed for autocomplete to use
var array = data.error ? [] : $.map(data.result, function (m) {
return {
label: m.cityName,
value: m.id
};
});
response(array);

});
},
focus: function (event, ui) {
return false;

},
select: function (event, ui) {
event.preventDefault();
$("#CityName").val(ui.item.label);
}
});
});
},
}
);
},
error: function (data) {

}
});
});

Answer

Thing is that you call two $(document).ready(function () { expecting the second to execute «after» the first... Wich is not the case.
Have to «wait» for user input.

I didn't check your code closely yet.
But just in the question... Lies the logic mater.

I would fill the first select on page load, without Ajax.

Just like that... Except if the state selection options depend on some other previous value.
Then, onchange of the state select → trigger an Ajax call to fill the city names select.

;)