javascript - How to dynamically populate a select box based on text box input -

i have text box , select box box. select box values loaded via ajax call based on selection in select box. requirement input value in text box based on input select box should show values.

<form:input id="txtbox"></form:input>  <form:select id="selectbox" path="selectedvalue">   <form:option value="0">anand</form:option >   <form:option value="1">arun</form:option >   <form:option value="2">ananya</form:option >   <form:option value="3">babu</form:option > </form:select> 

now enter 'a' in text box select box should populated "anand","arun","ananya".

if enter 'n' again in txt box "anand" , "ananaya" should listed.

if enter alphabet in text box not in select box select box should empty.

how achieve in jquery?

firstly, others have mentioned should have @ http://jqueryui.com/autocomplete provides excelent option doing described.

if prefer not use plugin can this: jsfiddle demo

$(function() {      $('input[type=text]').keyup(function() {          $('select option:contains("' + $('input[type=text]').val() + '")').show().siblings().hide();      });  }); 

n.b. crude proof of concept, need refining before use in production situation.