J'avais l'impression que l'on pouvait taper dans une boîte combo en plus de sélectionner les valeurs déjà présentes dans la liste. Cependant, je n'arrive pas à trouver d'informations sur la façon de le faire. Y a-t-il une propriété que je dois ajouter pour permettre la saisie de texte ?
Réponses
Trop de publicités?
tdolphin
Points
32
Celui-ci est beaucoup plus petit, ne nécessite pas de jquery et fonctionne mieux dans safari. https://github.com/Fyrd/purejs-datalist-polyfill/
Vérifiez les numéros de la modification pour ajouter une flèche descendante. https://github.com/Fyrd/purejs-datalist-polyfill/issues
Ladislav Zima
Points
99
Ma solution est très simple, elle ressemble exactement à une combobox éditable native et fonctionne même dans IE6 (certaines réponses ici nécessitent beaucoup de code ou de bibliothèques externes et le résultat est tel que, par exemple, le texte dans la zone de texte passe derrière l'icône de la liste déroulante de la partie combobox ou cela ne ressemble pas du tout à une combobox éditable).
Il s'agit de découper la combobox pour que seule l'icône de la liste déroulante soit visible au-dessus de la zone de texte. Et la zone de texte est un peu large sous la partie de la combobox, de sorte que vous ne voyez pas son extrémité droite - visuellement, elle continue avec la combobox : https://jsfiddle.net/dLsx0c5y/2/
select#programmoduleselect
{
clip: rect(auto auto auto 331px);
width: 351px;
height: 23px;
z-index: 101;
position: absolute;
}
input#programmodule
{
width: 328px;
height: 17px;
}
<table><tr>
<th>Programm / Modul:</th>
<td>
<select id="programmoduleselect"
onchange="var textbox = document.getElementById('programmodule'); textbox.value = (this.selectedIndex == -1 ? '' : this.options[this.selectedIndex].value); textbox.select(); fireEvent2(textbox, 'change');"
onclick="this.selectedIndex = -1;">
<option value=RFEM>RFEM</option>
<option value=RSTAB>RSTAB</option>
<option value=STAHL>STAHL</option>
<option value=BETON>BETON</option>
<option value=BGDK>BGDK</option>
</select>
<input name="programmodule" id="programmodule" value="" autocomplete="off"
onkeypress="if (event.keyCode == 13) return false;" />
</td>
</tr></table>(Utilisé à l'origine, par exemple ici, mais n'envoyez pas le formulaire : old.dlubal.com/WishedFeatures.aspx )
EDIT : Les styles doivent être un peu différents pour macOS : Ch est ok, pour FF augmentez la hauteur de la combobox, Safari et Opera ignorent la hauteur de la combobox donc augmentent leur taille de police (a une limite supérieure, donc diminue un peu la hauteur de la textbox) : https://i.stack.imgur.com/efQ9i.png
Flareman2020
Points
31
Étant donné que la balise HTML datalist n'est pas encore totalement prise en charge, une autre approche que j'ai utilisée est la balise ComboBox de la boîte à outils Dojo . Elle était plus facile à mettre en œuvre et mieux documentée que les autres options que j'ai explorées. Elle s'adapte également très bien aux frameworks existants. Dans mon cas, j'ai ajouté cette combobox à un site Web existant basé sur Codeigniter et Bootstrap sans aucun problème. Il faut juste veiller à appliquer le thème Dojo (par exemple class="claro") à l'élément parent de la combobox plutôt qu'à la balise body pour éviter les conflits de style.
Tout d'abord, incluez le CSS d'un des thèmes Dojo (tel que 'Claro'). Il est important que le fichier CSS soit inclus avant les fichiers JS ci-dessous.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" />Ensuite, inclure jQuery et Dojo Toolkit via CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>Ensuite, vous pouvez simplement suivre L'exemple de code de Dojo ou utilisez l'exemple ci-dessous pour obtenir une combobox fonctionnelle.
<body>
<!-- Dojo Dijit ComboBox with 'Claro' theme -->
<div class="claro"><input id="item_name_1" class=""/></div>
<script type="text/javascript">
$(document).ready(function () {
//In this example, dataStore is simply an array of JSON-encoded id/name pairs
dataStore = [{"id":"43","name":"Domain Name Renewal"},{"id":"42","name":"Hosting Renewal"}];
require(
[ "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"],
function (Memory, ComboBox) {
var stateStore = new Memory({
data: dataStore
});
var combo = new ComboBox({
id: "item_name_1",
name: "desc_1",
store: stateStore,
searchAttr: "name"},
"item_name_1"
).startup();
});
});
</script>
</body>
Andrew
Points
959
Aucune des autres réponses n'était satisfaisante, en grande partie parce que l'interface utilisateur est toujours aussi mauvaise. J'ai trouvé este qui a l'air bien et qui est très proche de la perfection, tout en étant personnalisable.
Une liste complète d'exemples, d'options et autres peut être consultée à l'adresse suivante aquí mais voici une démonstration de base :
$('#editable-select').editableSelect();
<link href="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.js"></script>
<select id="editable-select">
<option>Alfa Romeo</option>
<option>Audi</option>
<option>BMW</option>
<option>Citroen</option>
</select>
kmb
Points
237
Regardez ComboBox ou Combo sur ce site : http://www.jeasyui.com/documentation/index.php#
