javascript - Force AutoComplete to depend on another's result -
i trying have 2 autocomplete textboxes, second 1 being dependent on whatever value input in 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 values of first text box should values of second 1 appear. florida selected, names of florida cities should appear in second 1 when searches. have absolutely no idea on how this. javascript not forte.any great!
edit: finalized, working script, in case suffering 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 array of objects , must transformed autocomplete 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) { } }); });
thing call 2 $(document).ready(function () { expecting second execute «after» first... wich not case.
have «wait» user input.
i didn't check code closely yet.
in question... lies logic mater.
i fill first select on page load, without ajax.
just that... except if state selection options depend on other previous value.
then, onchange of state select → trigger ajax call fill city names select.
;)
