Demo of Autocomplete source option in JQuery UI

Change this to




Change the radio button to change the source to see the effect on autocomplete .

source : games=["Cricket","Football","Badminton","Tnnis","Table Tennis"];
cource : fruits=["Banana","Mango","Orange","Apple","Graves"];



HTML

<input id=auto_c>
<div id=d1></div>
Change this to 
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r1' value='fruits' checked>Fruits</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='games' >Games</label>
</div>

jquery

<script>
$(document).ready(function() {
	var games=["Cricket","Football","Badminton","Tnnis","Table Tennis"];
	var fruits=["Banana","Mango","Orange","Apple","Graves"];
////////////////
$( "#auto_c" ).autocomplete({
  source: fruits
 });
///////////////
var status_used = $( "#auto_c" ).autocomplete( "option", "source" );
$('#d1').html( " <b>Source   :  </b>: " + status_used );
//////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
if(sel=='fruits'){
$( "#auto_c" ).autocomplete( "option", "source", fruits );
}
if(sel=='games'){
$( "#auto_c" ).autocomplete( "option", "source", games );
}

var status_used = $( "#auto_c" ).autocomplete( "option", "source" );
$('#d1').html( " <b>Source   :  </b>: " + status_used );
})
///////////////////////
})</script>