How to Type in a Select?

Question

How to Type in a Select?

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

How can I make a select work also as a search field? Type, the client types as if typing in a input text for example, and the select options are being filtered according to what he typed. I'm not sure if it would be a select , but I need to do it somehow.

Currently it looks like this:

<select id="id_mfuncao" name="id_mfuncao" class="form-control">
   @foreach($mfuncoes as $mfuncao)
      <option value="{{ $mfuncao->id }}">{{ $mfuncao->nome }}</option>
   @endforeach
</select>

php javascript html laravel

asked by anonymous 03.02.2016 / 18:11

2 answers

0

This is not a select, this can be handled according to the language you are using.

One way to do this is with jQuery, with the keypress function:

$("#filtro").keypress(function () {
    // ação a ser tomada
});

The select is going to bring the results behind.

03.02.2016 / 18:14

Adding the RadioButton in the DataGrid at runtime PSYCOPG2 - Paging

score 1 · Accepted Answer

I put it in the Snippet just to organize.

The JS is simple, in the selector #q that is the field, every letter that I type is made a search in the database and in success I show those results by means of append . >

In the function postConsulta in Controller I return a array , not json .

// Resultados da Pesquisa
$('#q').on('keyup', function() {
  var str = $(this).val();
  var res = $("#resultados");
  var row = $("#resultados > ul");
  $.ajax({
    url: urlBase + 'consulta/', 
    type: "POST",
    cache: false,
    async: false,
    data: {
      str: str
    },
    success: function(result) {
      res.css('display', 'block');
      row.html('');
      if (str != '') {
        $.each(result, function(index, value) {
          if (value == 'Produtos') {
            row.append('<li class="subtitle">Produtos</li>');
          } else if (value == 'Serviços') {
            row.append('<li class="subtitle">Serviços</li>');
          } else if (value != '')
            row.append('<li>' + value + '</li>');
        });
      } else {
        str = '';
        res.css('display', 'none');
      }
    }
  });
});

.consulta {
  display: block;
  width: 100%;
  position: relative;
  div#resultados {
    display: none;
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      width: 410px;
      text-indent: 14px;
      margin-top: 5px;
      margin-left: 34px;
      li {
        font-family: @avenir;

font-size: 15px;
        line-height: 23px;
        a {
          color: #FFF;
          text-decoration: none;
        }
        &:hover {
          a {
            color: @yellow;

          }
        }
        &.subtitle {
          color: #FFF;
          font-weight: bolder;
          font-size: 17px;
          list-style-type: disc;
          a {
            color: #000;
          }
        }
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="consulta">
  <label>BUSCA AVANÇADA</label>
  <input type="text" name="q" id="q" placeholder="Pesquisar por produtos/serviços">
  <div id="resultados">
    <ul></ul>
  </div>
</div>