Search field inside select box how to do?

Question

I would like to know if there is any way to put a search field inside a select box, because for example...I have a selectbox with +3000 thousand registered items, there arises my need to have a search field to streamline the user side.

In the picture above is my normal select box with all items...

Has anyone ever had this need? It is possible to do this with HTML and PHP ?

Answer 1

Has a js plugin calling Select2. Take a look at the documentation of it.

Just import the guy’s library:

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

Then just do it:

$(document).ready(function() {
   $(".meuselect").select2();
});

<select class="meuselect">
  <option value="1">Opcao 99</option>
  ...
  <option value="99">Opcao 99</option>
</select>

Anything you need, you can call :)

Answer 2

You can use Select2.js, it is a search component equal to the select you are using, but it makes calls to the server with ajax filtering by the value typed in it. I believe that’s what you need.

To use is very easy Add these 2 files to the head of your website

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

and to use it just do the following:

Mount the html:

    <select class="js-data-example-ajax">
      <option value="3620194" selected="selected">select2/select2</option>
    </select>

and create the javascript responsible for configuring the component:

$(".js-data-example-ajax").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, page) {
      // parse the results into the format expected by Select2.
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data
      return {
        results: data.items
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

If you need more information just visit the official website: https://select2.github.io/examples.html

Answer 3

function fnBuscaSelect(busca, select) {
  var valorABuscar = busca.value;
  var selectedTrends = document.getElementById(select);
  valorIndex = selectedTrends.selectedIndex;
  var soprineiro = true;
  for (var i = 0; i < selectedTrends.length; i++) {
    valorTextSelect = selectedTrends.options[i].text;
    //se achou o dado dentro do que digitou então mostra.
    if (valorTextSelect.indexOf(valorABuscar) > -1) {
      if (soprineiro) {
        soprineiro = false;
        valorIndex = i;
        //valorText=selectedTrends.options[i].text;
      }
      selectedTrends.options[i].style.display = "";

    } else {
      selectedTrends.options[i].style.display = "none";
      selectedTrends.options[i].selected = '';
    }
  }
  if ((soprineiro) && (valorABuscar != "")) {

  }
  //selectedTrends.selectedIndex=i; 
  //    selectedTrends.options[selectedTrends.selectedIndex].value=selectedTrends.options[i].value;
  //    selectedTrends.options[selectedTrends.selectedIndex].text=selectedTrends.options[i].text;
  //    selectedTrends.open();

  selectedTrends.options[valorIndex].selected = 'selected';
  //    selectedTrends.focus();

}

<input type=text value="" placeholder="Busque o cliente aqui." onChange='fnBuscaSelect(this,"DE_CLIENTE");'><br>