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

[cristianomg 0]

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?

 

[Evandro Oliveira 331]

Para usar com jQuery, use

change

e não

onchange

$("#search").on("change", function () {});