web-dev-qa-db-fra.com

Comment créer une liste déroulante modifiable en HTML/Javascript?

Je dois laisser les utilisateurs sélectionner un élément dans une liste déroulante, mais aussi leur permettre de saisir du texte, même s'il ne correspond à aucun élément de la liste. Comment puis-je réaliser cela sur une page Web avec HTML et Javascript?

Le champ select ne permet pas aux utilisateurs de saisir du texte et le champ input n'indique pas les alternatives préférées.

Tous les éléments doivent indiquer si l'utilisateur ouvre le menu déroulant. Il ne peut donc s'agir d'un simple remplissage automatique qui ne montre que les éléments correspondants.

javascripthtmlcomboboxdrop-down-menu
31
Christian Davén

Voici un script pour cela: Demo , Source

Ou un autre qui fonctionne légèrement différemment: lien supprimé (site n'existe plus)

13
Tom Gullen

Je sais que cette question a déjà reçu une réponse il y a longtemps, mais elle s'adresse à d'autres personnes qui risquent de se retrouver ici et ont du mal à trouver ce dont elles ont besoin. J'avais du mal à trouver un plug-in existant qui répondait exactement à mes besoins. J'ai donc créé mon propre plug-in jQuery UI pour accomplir cette tâche. Il est basé sur l'exemple de liste déroulante sur le site de l'interface utilisateur jQuery. J'espère que cela pourrait aider quelqu'un.

https://github.com/tmooney3979/jquery.ui.combify

9
portlandrock

Vous pouvez essayer mon implémentation de combobox modifiable http://www.zoonman.com/projects/combobox/

3
zoonman

Je cherchais une réponse également, mais tout ce que je pouvais trouver était obsolète.

Ce problème est résolu depuis HTML5: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Si je n'avais pas trouvé cela, j'aurais choisi cette approche:

http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html

2
Jook

Oubliez l'élément datalist qui est une bonne solution pour la fonction de saisie semi-automatique, mais pas pour la fonction combobox.

css:

.combobox {
    display: inline-block;
    position: relative;
}

.combobox select {
    display: none;
    position: absolute;
    overflow-y: auto;
}

html:

<div class="combobox">
    <input type="number" name="" value="" min="" max="" step=""/><br/>
    <select size="3">
        <option value="0"> 0</option>
        <option value="25"> 25</option>
        <option value="40"> 40</option>
    </select>
</div>

js (jQuery):

$('.combobox').each(function() {
    var
        $input = $(this).find('input'),
        $select = $(this).find('select');
    function hideSelect() {
        setTimeout(function() {
            if (!$select.is(':focus') && !$input.is(':focus')) {
                $select
                    .hide()
                    .css('z-index', 1);
            }
        }, 20);
    }
    $input
        .focusin(function() {
            if (!$select.is(':visible')) {
                $select
                    .outerWidth($input.outerWidth())
                    .show()
                    .css('z-index', 100);
            }
        })
        .focusout(hideSelect)
        .on('input', function() {
            $select.val('');
        });
    $select
        .change(function() {
            $input.val($select.val());
        })
        .focusout(hideSelect);
});

Cela fonctionne correctement même lorsque vous utilisez la saisie de texte au lieu de nombre.

1
Nagy Zoltán

Je pense que cela répondra à vos exigences:

https://github.com/RUPOJS/jsCombo

1
RSS

essayez de faire ça 

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2"  style="width: 140px;
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
        <div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
    top: 0px; left: 0px; z-index: 1; width: 165px;">
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>

 

veuillez regarder l'exemple suivant fiddle

0
atom217