web-dev-qa-db-fra.com

Création d'une zone de sélection avec une option de recherche

J'essaie de reproduire ce que vous pouvez voir ici dans cette image. enter image description here

Je veux être capable de taper dans le champ de texte au-dessus de la case ou simplement cliquer sur l'option directement.

Quelle serait la meilleure façon de s'y prendre? Y a-t-il quelque chose d'initialisation liée qui existe déjà?

javascripthtmlhtml-select
25
SBB

Select2 http://select2.github.io peut être encore meilleur et plus actif que Choisi. 

Voir cette comparaison: http://sitepoint.com/jquery-select-box-components-chosen-vs-select2

Je suis allé à Select2 (il y a quelques mois) parce que Chosen avait un problème d'utilisation de caractères chinois via un IME http://github.com/harvesthq/chosen/issues/2663 ​​ Cela fonctionne très bien.

11
Kai Carver

Ce code simple a fonctionné pour moi

$(document).ready(function(){
$("input").click(function(){
        $(this).next().show();
        $(this).next().hide();
    });

});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input list="brow">
<datalist id="brow">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>  
</body>
</html>

5
Hemanth Palle

essayez jQuery ui autocomplete. Pour cela, consultez ce lien

http://jqueryui.com/autocomplete/#combobox

4
Sohil Desai

Cela fonctionnera pour la plupart d'entre nous . La réponse donnée par Hemanth Palle est la manière la plus simple de le faire, cela a fonctionné pour moi et le code JS n'était pas nécessaire ..__ Le seul problème que j'ai constaté est que, selon W3Schools, La balise datalist n'est pas prise en charge dans Internet Explorer 9 et les versions antérieures, ni dans Safari.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>  
</body>
</html>
1
SammeAyala