How to Type in a Select?

Asked

Viewed 2,555 times

2

How can I make a select work also as a search field? Type, the client type as if he were typing in a input text for example, and the options of select 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 is 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

  • I do it right with a field text and a ul hidden and empty underneath. From there search the data via ajax database and make a append() with the li within with the values.

  • You want a text field where what the person type is used as a filter in a search? in some specific field?

  • so I have a select with about 500 options coming from the bank, I need the person can type there to n run the select if you know at least part of the name

  • I think q n need to use ajax in this case @Zoom, because the data is already loaded. I just need to filter

  • Good, but there’s no way you can type in a select, you have to masquerade and show just what you need. In my head you’d have to ride the combobox by ajax.

2 answers

1


I put in the Snippet just to organize.

The JS is simple, in the selector #q which is the field, each letter I type is searched in the database and success I show these results by means of a append.

In function postConsulta in the Controller I return a array, and 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>
<div class="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>

  • But then it only looks like the options if the guy types something, right? if yes, it would be like al same time as he can type, he can tbm see all available functions?

  • Because I’ve seen this I want somewhere but agr n remember, it seemed so simple, maybe a plugin. Was or "seemed" really a select with the arrow on the side and tals, so q can type in it to filter.

  • See what functions Raylan ?

  • see all options*

  • Yes, you can control this by the query in the controller, a query that brings everything and only one of what the user is searching. It makes a merge array and bring. From there on JS you have to find a way to make aesthetically cool.

  • I managed to put here, vlw!

Show 1 more comment

0

This is not a select, it can be treated 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 will bring the results from behind.

  • Sorry @Bruno, but I could not understand how to apply this solution, could give me more details?

  • I just gave a simple example, take a look at: https://jqueryui.com/autocomplete/

Browser other questions tagged php javascript html laravel

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