CAIXA DE PESQUISA HTML

Ola alguém poderia me informa como posso usar um auto preenchimento quando vai pesquisar ou melhor

conforme a pessoa vai digitando as letras vai aparecendo os nome referentes as letras que esta sendo digitadas

por EX: se eu digitar em pesquisar a letras  ab

Abelha

Aberto

Abrir

aqui esta meu codigo do HTML da caixa de pesquisa

<style type="text/css">

#caixa-b-1 {

	text-align: center;

	margin: 0;

 height: 80px;

	width: 100%;

	padding: 0px 16px;

	display: inline-block;

	border: solid 0px #D2D2D2;

	-moz-border-radius: 2px;

	-webkit-border-radius: 2px;

	-goog-ms-border-radius: 2px;

	border-radius: 2px;

}

#pesquisar-form-b-1 {

	font: normal bold 23px Arial, Tahoma, Helvetica, FreeSans, sans-serif;

	padding: 25px;

	color: #000;

	border: 1px solid #D2D2D2;

	background: #FFF;

 height: 29px;

 width: 540px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	-goog-ms-border-radius: 5px;

	border-radius: 0px;

	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.30) inset;

	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.30) inset;

	box-shadow: 1px 1px 2px rgba(0,0,0,0.30) inset;

}

#submit-button-b-1 {

	color: #435444;

	margin: 0 0 0 9px;

	height: 80px;

 width: 200px;

	border: 1px solid #DDD;

	font: normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;

	text-shadow: 0 2px 2px rgba(0,0,0,0);

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	-goog-ms-border-radius: 5px;

	border-radius: 0px;

	background: #000000;

	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF));

	background: -moz-linear-gradient(top, #000000, #);

}

</style>

<div id="caixa-b-1"><form action="http://localhost/cidade/listagem_de-busca.php" method="GET" name="input" target="frm-index2">

<input id="pesquisar-form-b-1" name="pesquisar" type="text" autocomplete="off" placeholder="Pesquise por empresas, segmento ou servição..." x-webkit-speech="x-webkit-speech" /><input id="submit-button-b-1" type="submit" value=" Pesquisar " /></form></div>