Search field in the <select> form

Asked

Viewed 3,205 times

5

Good night, I would like to know how to in the list of a select enable "search" within the field?

                    <select class="input-xxlarge" onchange="clienteChange()" style="width: 409px !important;" id="cliente" name="cliente" type="search">
                        <option value=""></option>

                            <option value="273"  >A IDENTIDADE VISUAL LTDA</option>

                            <option value="3"  >AABA COMERCIO EQUIPAMENTOS MEDICOS LTDA</option>

                            <option value="8"  >AKZO NOBEL LTDA.</option>

                            <option value="9"  >ALLEANZA CONSULTORIA S SISTEMAS LTDA.</option>

                            <option value="13"  >ANALISE CONSULTORIA EMPRESARIAL</option>

                            <option value="16"  >ASSESSORIA CONTABIL FERRAZ S/S LTDA.</option>

                            <option value="18"  >ATRIO EMPREENDIMENTOS HOTELEIROS LTDA.</option>

                            <option value="282"  >AUGUSTO PROLIK ADVOGADOS ASSOCIADOS</option>

                            <option value="304"  >AUTO PECAS COLOMBO LTDA</option>

                            <option value="316"  >AVECK DO BRASIL LTDA</option>

                            <option value="230"  >BANCO BTG PACTUAL S/A</option>

                            <option value="23"  >BEEHIVE CONSULTORIA ADM. E CORRETORA DE SEGUR</option>

                            <option value="338"  >BEST PLOTTER SHOP</option>

                            <option value="24"  >BIGVEL EXPORTACION DE AUTO PARTS LTDA.</option>

                            <option value="25"  >BLU DESIGN</option>

                            <option value="340"  >BRASIL INDUSTRIA DE TECNOLOGIA LTDA ME</option>

                            <option value="27"  >BRASLIFT EQUIPAMENTOS E LOGISTICA LTDA.</option>

                            <option value="225"  >BRIOSHI SERVIÇOS MÉDICOS E REPRESENTÇÕES COMERCIAIS S/S LTDA</option>

                            <option value="335"  >CAIXA ECONÔMICA FEDERAL</option>

                            <option value="261"  >CLINI VI-DA - DR DAYSON </option>

                            <option value="348"  >COLÉGIO SUÍÇO-ASSOCIAÇÃO ESCOLA SUÍÇO BRASILEIRA</option>

                            <option value="40"  >CONCEPTUS-CONCEITO PSICOLOGIA,PSICANALISE E P</option>

                            <option value="42"  >CONFRARIA DA NOTICIA - GLAUCIO R. DIAS - ME</option>

                            <option value="43"  >CONSORCIO ESTACAO NATiCA</option>

                            <option value="231"  >CONSULTER CONTABILIDADE LTDA.</option>

                            <option value="337"  >Controle Farma Substituiçao</option>

                            <option value="320"  >COPIADORA NICARAGUA LTDA</option>

                            <option value="51"  >CUNHA DE ALMEIDA ADVOGADOS ASSOCIADOS</option>

                            <option value="53"  >DB MEGA IMPLANTACAO DE SISTEMAS DE INFORM. LT</option>

                            <option value="257"  >DEFINIÇÃO</option>

                            <option value="54"  >DIACEL GD INDUSTRIA COMERCIO E IMPORTACAO LTD</option>

                            <option value="55"  >DIGITAL SK SOLUCOES EM MIDIATIZACAO LTDA. - M</option>

                            <option value="339"  >DKTECH COMERCI DE PRODUTOS ELETRONICOS LTDA ME</option>

                            <option value="58"  >DR. GILBERTO V. FIGUEIREDO FILHO</option>

                            <option value="272"  >DUO LIGHT COMERCIO DE LUMINARIAS LTDA</option>

                            <option value="60"  >EDITORIAL CENTER SS LTDA.</option>

                            <option value="62"  >EMBRAPOL SUL BRASILEIRA </option>

                            <option value="63"  >ENARA INCORPORADORA LTDA</option>

                            <option value="168"  >ENVEX ENGENHARIA E CONSULTORIA SS</option>

                            <option value="68"  >ESPHERA - CONCREMON ENGENHARIA CIVIL LTDA.</option>

                            <option value="347"  >ETHOS BRASIL SOLUÇOES LOGISTICAS LTDA ME</option>

                            <option value="73"  >FARMALINE COMERCIO DE PROD. FARMACEUTICOS LTD</option>

                            <option value="350"  >FASHION TRENDS  {A.CARVALHO S.BOULOS MODA - ME}</option>

                            <option value="330"  >FECETRIP - TURISMO E TRANSPORTE LTDA</option>

                            <option value="287"  >FIRE SAFETY ENGENHARIA LTDA</option>

                            <option value="78"  >FRIMESA COOPERATIVA CENTRAL </option>

                            <option value="82"  >GEMALTO BRASIL</option>

                            <option value="83"  >GILMAR ADAMI ( CHAVEIRO DO VALE )</option>

                            <option value="233"  >GRAAL CARD ADMINISTRADORA LTDA</option>

                            <option value="85"  >HRTOOLS COMERCIO E REPRESENTACOES LTDA</option>

                            <option value="326"  >ICATU SEGUROS S/A</option>

                            <option value="90"  >ITAUTEC</option>

                            <option value="318"  >JC ENTREGAS </option>

                            <option value="206"  >JOSUÉ SOUZA ASSESSORIA IMOBILIÁRIA</option>

                            <option value="91"  >JR INFORMATICA </option>

                            <option value="259"  >JULY ROSSI RESIDENCIAL S/A CURITIBA</option>

                            <option value="93"  >KAPITAL COMERCIO DE PRODUTOS AUTOMOTIVOS LTDA</option>

                            <option value="296"  >KARINA ROSSI RESIDENCIAL S/A CURITIBA</option>

                            <option value="317"  >KASVI IMPORTAÇÃO E DISTRIBUIÇÃO DE PRODUTOS PARA LABORATORIO LTDA </option>

                            <option value="332"  >KOMATSU FOREST LTDA</option>

                            <option value="216"  >LAMIGRAF DO BRASIL IND E COM DE PAPEIS DECORATIVOS LTDA</option>

                            <option value="298"  >LBT MASTER BRINK/COMÉRCIO DE EQUIPAMENTOS EDUCACIONAIS EIRILLI.EPP</option>

                            <option value="229"  >LINEA COMÉRCIO DE METAIS LTDA</option>

                            <option value="322"  >LUCIMARA DA SILVA MOREIRA HORA DA FRUTA </option>

                            <option value="334"  >M BRASIL COMERCIO DE CARNES LTDA</option>

                            <option value="99"  >MACEDOSUL CORRETORA DE SEGUROS</option>

                            <option value="285"  >MAREL FOOD SYSTEMS DO BRASIL COMERCIAL LTDA</option>

                            <option value="100"  >MARINGA PASSAGENS E TURISMO LTDA (MARINGA TUR</option>

                            <option value="101"  >MAXIFARMA COMERCIAL FARMACEUTICA LTDA.</option>

                            <option value="102"  >MEDICINA RENAL - ROBERTO FLAVIO SILVA PECOITS</option>

                            <option value="284"  >MENU ESPECIAL COMERCIO DE VINHOS E ACESSORIOS DE GASTRONOMIA LTDA - ME</option>

                            <option value="345"  >MERCO SOLUÇÕES EM SAUDÊ </option>

                            <option value="103"  >MG ARQUITETURA E INTERIORES</option>

                            <option value="315"  >MJ ACESSORIOS LTDA</option>

                            <option value="341"  >MNJ SERVIÇOS DE IMPRESSÃO LTDA</option>

                            <option value="115"  >MOVEIS PEDROSO LTDA</option>

                            <option value="301"  >MULTI OPTICA DISTRIBUIDORA LTDA </option>

                            <option value="106"  >MULTIPLAN EMPREENDIMENTOS IMOBILIARIOS S/A</option>

                            <option value="108"  >N. LEITE EMPREENDIMENTOS IMOBILIARIOS LTDA.</option>

                            <option value="351"  >NATURE COMERCIAL INPORTADORA E EXPORTADORA</option>



                    </select>
  • If possible mark the answer as the solution to your question, thus facilitating subsequent visitors.

1 answer

3


If I understand correctly what you’re looking for is the Chosen, it is a jQuery pro plugin that provides this search option in a select among other varieties, for example creating tags similar to Stackoverflow.

$('#cliente').chosen({
    placeholder_text_single : 'Procure seu cliente'
});
<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>

<select class="input-xxlarge" onchange="clienteChange()" style="width: 409px !important;" id="cliente" name="cliente" type="search">
  <option value=""></option>

  <option value="273"  >A IDENTIDADE VISUAL LTDA</option>

  <option value="3"  >AABA COMERCIO EQUIPAMENTOS MEDICOS LTDA</option>

  <option value="8"  >AKZO NOBEL LTDA.</option>

  <option value="9"  >ALLEANZA CONSULTORIA S SISTEMAS LTDA.</option>

  <option value="13"  >ANALISE CONSULTORIA EMPRESARIAL</option>

  <option value="16"  >ASSESSORIA CONTABIL FERRAZ S/S LTDA.</option>

  <option value="18"  >ATRIO EMPREENDIMENTOS HOTELEIROS LTDA.</option>

  <option value="282"  >AUGUSTO PROLIK ADVOGADOS ASSOCIADOS</option>

  <option value="304"  >AUTO PECAS COLOMBO LTDA</option>

  <option value="316"  >AVECK DO BRASIL LTDA</option>

  <option value="230"  >BANCO BTG PACTUAL S/A</option>

  <option value="23"  >BEEHIVE CONSULTORIA ADM. E CORRETORA DE SEGUR</option>

  <option value="338"  >BEST PLOTTER SHOP</option>

  <option value="24"  >BIGVEL EXPORTACION DE AUTO PARTS LTDA.</option>

  <option value="25"  >BLU DESIGN</option>

  <option value="340"  >BRASIL INDUSTRIA DE TECNOLOGIA LTDA ME</option>

  <option value="27"  >BRASLIFT EQUIPAMENTOS E LOGISTICA LTDA.</option>

  <option value="225"  >BRIOSHI SERVIÇOS MÉDICOS E REPRESENTÇÕES COMERCIAIS S/S LTDA</option>

  <option value="335"  >CAIXA ECONÔMICA FEDERAL</option>

  <option value="261"  >CLINI VI-DA - DR DAYSON </option>

  <option value="348"  >COLÉGIO SUÍÇO-ASSOCIAÇÃO ESCOLA SUÍÇO BRASILEIRA</option>

  <option value="40"  >CONCEPTUS-CONCEITO PSICOLOGIA,PSICANALISE E P</option>

  <option value="42"  >CONFRARIA DA NOTICIA - GLAUCIO R. DIAS - ME</option>

  <option value="43"  >CONSORCIO ESTACAO NATiCA</option>

  <option value="231"  >CONSULTER CONTABILIDADE LTDA.</option>

  <option value="337"  >Controle Farma Substituiçao</option>

  <option value="320"  >COPIADORA NICARAGUA LTDA</option>

  <option value="51"  >CUNHA DE ALMEIDA ADVOGADOS ASSOCIADOS</option>

  <option value="53"  >DB MEGA IMPLANTACAO DE SISTEMAS DE INFORM. LT</option>

  <option value="257"  >DEFINIÇÃO</option>

  <option value="54"  >DIACEL GD INDUSTRIA COMERCIO E IMPORTACAO LTD</option>

  <option value="55"  >DIGITAL SK SOLUCOES EM MIDIATIZACAO LTDA. - M</option>

  <option value="339"  >DKTECH COMERCI DE PRODUTOS ELETRONICOS LTDA ME</option>

  <option value="58"  >DR. GILBERTO V. FIGUEIREDO FILHO</option>

  <option value="272"  >DUO LIGHT COMERCIO DE LUMINARIAS LTDA</option>

  <option value="60"  >EDITORIAL CENTER SS LTDA.</option>

  <option value="62"  >EMBRAPOL SUL BRASILEIRA </option>

  <option value="63"  >ENARA INCORPORADORA LTDA</option>

  <option value="168"  >ENVEX ENGENHARIA E CONSULTORIA SS</option>

  <option value="68"  >ESPHERA - CONCREMON ENGENHARIA CIVIL LTDA.</option>

  <option value="347"  >ETHOS BRASIL SOLUÇOES LOGISTICAS LTDA ME</option>

  <option value="73"  >FARMALINE COMERCIO DE PROD. FARMACEUTICOS LTD</option>

  <option value="350"  >FASHION TRENDS  {A.CARVALHO S.BOULOS MODA - ME}</option>

  <option value="330"  >FECETRIP - TURISMO E TRANSPORTE LTDA</option>

  <option value="287"  >FIRE SAFETY ENGENHARIA LTDA</option>

  <option value="78"  >FRIMESA COOPERATIVA CENTRAL </option>

  <option value="82"  >GEMALTO BRASIL</option>

  <option value="83"  >GILMAR ADAMI ( CHAVEIRO DO VALE )</option>

  <option value="233"  >GRAAL CARD ADMINISTRADORA LTDA</option>

  <option value="85"  >HRTOOLS COMERCIO E REPRESENTACOES LTDA</option>

  <option value="326"  >ICATU SEGUROS S/A</option>

  <option value="90"  >ITAUTEC</option>

  <option value="318"  >JC ENTREGAS </option>

  <option value="206"  >JOSUÉ SOUZA ASSESSORIA IMOBILIÁRIA</option>

  <option value="91"  >JR INFORMATICA </option>

  <option value="259"  >JULY ROSSI RESIDENCIAL S/A CURITIBA</option>

  <option value="93"  >KAPITAL COMERCIO DE PRODUTOS AUTOMOTIVOS LTDA</option>

  <option value="296"  >KARINA ROSSI RESIDENCIAL S/A CURITIBA</option>

  <option value="317"  >KASVI IMPORTAÇÃO E DISTRIBUIÇÃO DE PRODUTOS PARA LABORATORIO LTDA </option>

  <option value="332"  >KOMATSU FOREST LTDA</option>

  <option value="216"  >LAMIGRAF DO BRASIL IND E COM DE PAPEIS DECORATIVOS LTDA</option>

  <option value="298"  >LBT MASTER BRINK/COMÉRCIO DE EQUIPAMENTOS EDUCACIONAIS EIRILLI.EPP</option>

  <option value="229"  >LINEA COMÉRCIO DE METAIS LTDA</option>

  <option value="322"  >LUCIMARA DA SILVA MOREIRA HORA DA FRUTA </option>

  <option value="334"  >M BRASIL COMERCIO DE CARNES LTDA</option>

  <option value="99"  >MACEDOSUL CORRETORA DE SEGUROS</option>

  <option value="285"  >MAREL FOOD SYSTEMS DO BRASIL COMERCIAL LTDA</option>

  <option value="100"  >MARINGA PASSAGENS E TURISMO LTDA (MARINGA TUR</option>

  <option value="101"  >MAXIFARMA COMERCIAL FARMACEUTICA LTDA.</option>

  <option value="102"  >MEDICINA RENAL - ROBERTO FLAVIO SILVA PECOITS</option>

  <option value="284"  >MENU ESPECIAL COMERCIO DE VINHOS E ACESSORIOS DE GASTRONOMIA LTDA - ME</option>

  <option value="345"  >MERCO SOLUÇÕES EM SAUDÊ </option>

  <option value="103"  >MG ARQUITETURA E INTERIORES</option>

  <option value="315"  >MJ ACESSORIOS LTDA</option>

  <option value="341"  >MNJ SERVIÇOS DE IMPRESSÃO LTDA</option>

  <option value="115"  >MOVEIS PEDROSO LTDA</option>

  <option value="301"  >MULTI OPTICA DISTRIBUIDORA LTDA </option>

  <option value="106"  >MULTIPLAN EMPREENDIMENTOS IMOBILIARIOS S/A</option>

  <option value="108"  >N. LEITE EMPREENDIMENTOS IMOBILIARIOS LTDA.</option>

  <option value="351"  >NATURE COMERCIAL INPORTADORA E EXPORTADORA</option>

</select>

Keep an eye out for CSS and JS file import Chosen and take a look at the documentation here.

  • That’s right Maicon, thank you very much! Now I just customize the CSS according to mine.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.