Demo of Autocomplete search method in JQuery UI

Search :
Change this to




Search using above radio buttons to get the filtered options in menu.
For Blank ( no value ) minLength (option) must be set to 0

Words available : source:["PHP", "JQuery", "JavaScript", "HTML", "ASP", "Perl", "MySQL","Access","Excel","Dot Net"]



HTML

<input id=auto_c>
<div id=d1>Search : </div>
Change this to 
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r1' value='PHP'>PHP</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r1' value='A' >A</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r1' value='c' >C</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r1' value='d' >D</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='J' >J</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='Q' >Q</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value=''>Blank (No value)</label>
</div>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#auto_c" ).autocomplete({
  source: [ "PHP", "JQuery", "JavaScript", "HTML", "ASP", "Perl", "MySQL","Access","Excel","Dot Net" ],
  minLength:0
 });
///////////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$( "#auto_c" ).autocomplete( "search", sel );
$('#d1').html( " <b>Search :  </b> " + sel );
})
///////////////////////
})</script>