jquery autocomplete filter second one based on first value -
i have 2 autocomplete jquery function. i'd show in second value based on 1 choosen on first text filed. not want change original aval array, because if change first txt value, second 1 has adjust on it.
here code , jsfiddle:
$(function() { var shared; var aval = [{label: "odd", value: "1"}, { label: "even", value: "2"} ]; var bval = [{ label: "one", value: "1"}, { label: "two", value: "2"}, { label: "three", value: "1"}, { label: "four", value: "2"} ]; $( "#input_txt" ).autocomplete({ minlength: 0, source: aval, focus: function( event, ui ) { $( "#input_txt" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#input_txt" ).val( ui.item.label ); $( "#input_val" ).val( ui.item.value ); shared = ui.item.value; return false; } }) $( "#second_input_txt" ).autocomplete({ minlength: 0, source: bval, focus: function( event, ui ) { if(ui.item.value == shared){ $( "#second_input_txt" ).val( ui.item.label ); } return false; }, select: function( event, ui ) { $( "#second_input_txt" ).val( ui.item.label ); $( "#second_input_val" ).val( ui.item.value ); return false; } }) });
this right solution (there little error on source function - https://stackoverflow.com/users/1913845/ovaherenow)
$(function() { var share=-1; var aval = [{ label: "odd", value: "1" }, { label: "even", value: "2" } ]; var bval = [{ label: "one", value: "1" }, { label: "two", value: "2" }, { label: "three", value: "1" }, { label: "four", value: "2" } ]; $( "#input_txt" ).autocomplete({ minlength: 0, source: aval, focus: function( event, ui ) { $( "#input_txt" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#input_txt" ).val( ui.item.label ); $( "#input_val" ).val( ui.item.value ); share = ui.item.value; //alert(share); return false; } }) $( "#second_input_txt" ).autocomplete({ minlength: 0, source: function(request, response){ var bvalnew=new array(); if(share==-1) return bvalnew; for(var a=0;a<bval.length;a++){ if(bval[a].value==share){ bvalnew.push(bval[a]); } } response(bvalnew); }, focus: function( event, ui ) { $( "#second_input_txt" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#second_input_txt" ).val( ui.item.label ); $( "#second_input_val" ).val( ui.item.value ); return false; } }) });
Comments
Post a Comment