Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

cristianomg

Aplicar função no componente select ao invés do input type

Recommended Posts

Boa tarde pessoal,

Preciso de uma orientação.Peguei umas funcionalidades do bootsnipp, que ao digitar algo num campo input ele lista os itens por exemplo vindo da base que correspondem ao texto do item digitado segue código:

 <div class="form-group">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <input type="search" class="form-control" id="search" placeholder="Sua pesquisa pode ser por categorias informando: Bicicleta ou Caminhão ou Carro ou Moto, ..">
			<select type="search" class="form-control" id="search">
				<option value="">SELECIONE</option>
				<option type="search" class="form-control" id="search" value="CARRO">CARRO</option>
				<option value="MOTO">MOTO</option>
				<option value="BICICLETA">BICICLETA</option>
				</select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="searchable-container">
              <form action="controllers/salva_perfil3.php?idusuario=<?php echo $idlogado;?>" method="post" >
               <?php
											$listameusveiculo =mysql_query ("SELECT * from tipoveiculos ORDER by tipoveiculo,id ");
													while($linha=mysql_fetch_array($listameusveiculo)){
													$id_veic		 = 	$linha["id"];
													$apelido		 = 	$linha["nometipo"];
													$sobreveiculo	 = 	$linha["desc_veiculo"];
													$imagem			 = 	$linha["imagem_veic"];
													
													?>
										
                <div class="items col-xs-5 col-sm-5 col-md-3 col-lg-3">
                    <div class="info-block block-info clearfix">
                        <div class="square-box pull-left">
                            <span class="glyphicon glyphicon-tags glyphicon-lg"></span>
                        </div>
                        <div data-toggle="buttons" class="btn-group bizmoduleselect">
                            <label class="btn btn-default"><span style="color:#0174DF; font-weight:bold;"><?php echo $sobreveiculo;?></span>
                                <div class="bizcontent">
                                    <input type="checkbox" name="opcionais[]" autocomplete="off" value="<?php echo $id_veic;?>">
                                    <span class="glyphicon glyphicon-ok glyphicon-lg"></span>
									<br>
									<img src="img/no_image.png" style="width:140px; height:100px;">
                                    <h5><?php echo $apelido;?> </h5> // NESTE CAMPO APELIDO SE EU DIGITAR CARRO NO INPUT E NA MINHA LISTAGEM TIVER NOME DE ITENS DE CARRO, ELE MOSTRA SOMNETE OS ITENS DIGITADOS
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
					<?php 
												}
													?>
            </div>
        </div>
	</div>
</div>
  <div class="row">
	
	  <div class="col-sm-11" >
		 <div class="ui-group-buttons" style="border:0px solid #666; float:right;">
                <a href="wild.php"><button type="button" class="btn btn-danger btn-lg">Cancelar</button></a>
                <div class="or or-lg"></div>
                <input type="submit" class="button btn btn-success btn-lg" name="enviar" value="Incluir os veículos selecionados">
        </div>
	</form>
	</div>
	</div>
	<script type="text/javascript">
	$(function() {
    $('#search').on('onchange', function() {
        var pattern = $(this).val();
        $('.searchable-container .items').hide();
        $('.searchable-container .items').filter(function() {
            return $(this).text().match(new RegExp(pattern, 'i'));
        }).show();
    });
});
	</script>

Eu queria uma ajuda que ao invés de usar o campo input eu queria selecionar na combo select o value correspondente e ao item de minha listagem e este mostrar meus itens.

 

Pra ter uma ideia esta é a funcionalidade do bootsnipp sem o dropdown do select.

 

http://bootsnipp.com/snippets/featured/multi-select-tiled-layout

<script type="text/javascript">
	$(function() {
    $('#search').on('onchange', function() { // tentei mudar aqui para chamar no componente select e não deu , pois o input usa evento de keyup
        var pattern = $(this).val();
        $('.searchable-container .items').hide();
        $('.searchable-container .items').filter(function() {
            return $(this).text().match(new RegExp(pattern, 'i'));
        }).show();
    });
});
	</script>

Então eu queria usar o componente select ao inves de digitar no input, mas tentei atruibuir um evento no script como onselect, onchange para o componente select e não funcionou alguma sugestão dos amigos?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.