Caro(a) Leitor(a), gostaria de falar e mostrar hoje como selecionar valor dentro do dropdownlist digitando no campo texto e dando tab. Esse caso é muito usado quando a combo ou o dropboxlist possui muitos valores e fica impossível de digitar.
A melhor solução para buscar algum dado dentro do combo/dropdownlist com muitos dados, é criar um campo texto, digitar o valor e na saída o script busca os valores dentro do objeto e seleciona.
Utilizado no artigo:
- Ferramenta de desenvolvimento Visual Studio 2012
- Linguagem C#
- Componente DropboxList
- Tipo de aplicativo Web
Primeiro passo
O primeiro passo é preencher o dropdowlist com o dado retornado do banco de dados. Não vou entrar em detalhes de como retornar do banco de dados, isso porque existem vários artigos publicados no site mostrando como fazer isso.
Caso tenha alguma dúvida, pode entrar em contato que faço um artigo mostrando como retornar o dado do banco de dados.
A regra principal é buscar dados do banco de dados e retornar o objeto do tipo DataTable. Depois de retornar o dado, basta atribuir o valor ao DataSource e informa o campo texto e valor. No final basta chamar o método DataBind (para preencher os dados no objeto). Listagem 1.
Listagem 1 – Preenchendo dropdownlist.
HTML
<asp:DropDownList
ID="cmbMinhaCombo"
runat="server">asp:DropDownList>
C#
private void
preencherCombo()
{
cmbMinhaCombo.DataSource =
BuscaDados();
cmbMinhaCombo.DataTextField = "Descricao";
cmbMinhaCombo.DataValueField = "Valor";
cmbMinhaCombo.DataBind();
}
Segundo passo
O segundo passo é simples e ao mesmo tempo de necessária atenção. Depois de preenchido a dropdownlist, vamos criar um campo texto antes e adicionar o método para chamar a função em javascript.
Veja a listagem 2 mostrando como foi montado na parte HTML e C#.
Listagem 2 – Montando o segundo passo.
HTML
<asp:TextBox
ID="txtMeuValor"
runat="server"
MaxLength="4"
Width="50px">asp:TextBox>
JavaScript
<script language="javascript">
function
PassaValor(objFrom, objTo) {
document.getElementById(objTo).value =
document.getElementById(objFrom).value;
var vTipoObjeto = document.getElementById(objTo).type;
if (vTipoObjeto.search('select')
!= -1)
vTipoObjeto = 'select';
switch
(vTipoObjeto) {
case
"select":
if
(document.getElementById(objTo).selectedIndex == -1) {
alert("Atenção:
não existe este dado, favor buscar novamente.");
document.getElementById(objFrom).value = '';
document.getElementById(objFrom).focus();
}
//document.getElementById(objTo).selectedIndex
= 0;
break;
case
"undefined":
document.getElementById(objTo).value = '';
break;
}
}
script>
C#
protected
void Page_Load(object
sender, EventArgs e)
{
if (!Page.IsPostBack)
{
txtMeuValor.Attributes.Add("OnBlur", "PassaValor('"
+ txtMeuValor.ClientID + "','" +
cmbMinhaCombo.ClientID + "')");
}
}
Note que o JavaScript recebe dois valores, o primeiro o objeto “de” e o segundo o objeto “para”. Na primeira linha, o objeto “para” recebe o valor do objeto “de”. Depois ele verifica o tipo do objeto.
Se o objeto for do tipo “select” (caracterizado por ser combo) o JavaScript fala para selecionar o dado. Caso contrário ele emite uma mensagem ao usuário.
Na parte do C#, logo na entrada do método; adicionei o atributo “onBlur” para o campo texto adicionado na parte HTML. Nesta linha de código eu chamei o método e passei os valores necessários usando o “ClientId”.
O resultado final é bem interessante. Figura 1.
