Javascript Girl
  1. Javascript Girl
  3. Implémentation d'une DropDownList modifiable dans ASP.NET
Intereting Posts
Google Maps – Ressource interprétée comme script mais transférée avec image de type MIME / png Wrapper est désactivé dans la configuration du serveur par allow_url_include = 0 Est-il possible d'écraser la fonction window.location avec une fonction personnalisée? Nestry XMLHttpRequests avec plusieurs fermetures est-il une bonne idée? Validation de messagerie angulaire JS avec des caractères unicode Pourquoi la boîte de dialogue ouverte du fichier s'ouvre deux fois en cliquant sur le bouton dans FireFox Javascript: Mocking Constructor using Sinon Comment puis-je créer un bouton comme 'Digg it' pour mon site? Dialogue durable Durandal Ember component sendAction () ne fonctionne pas Pourquoi l'énoncé de la fonction requiert un nom? Comment puis-je convertir "/ Date (1399739515000) /" en format de date en JavaScript? Configuration de superpositions de cartes thermiques à l'aide de l'API Google Maps Comment créer un serveur WebSocket à l'aide de SuperWebSocket Partagez les constantes entre C # et Javascript dans MVC Razor

Implémentation d'une DropDownList modifiable dans ASP.NET

Quelle est la façon la plus élégante de mettre en œuvre un DropDownList dans ASP.NET qui est éditable sans utiliser de composants tiers.

En dernier recours, j'essaierai probablement d'utiliser un TextBox avec un AutoCompleteExtender avec une image pour "déplacer" la liste; Ou une TextBox superposant un HTML Sélectionnez avec un certain JavaScript pour remplir les valeurs de la Sélectionner à la TextBox. Mais j'espère vraiment qu'il existe une solution plus concrète et durable.

Merci d'avance.

Un contrôle sur une page

Vous pouvez suivre cet exemple simple pour une DropDownlist modifiable sur Code Project qui utilise les contrôles standards de ASP.NET TextBox et DropDownList combinés avec certains JavaScript.

Cependant, le code n'a pas fonctionné pour moi jusqu'à ce que j'ai ajouté une référence pour obtenir les valeurs ClientID pour TextBox et DropDownList: 

<script language="javascript" type="text/javascript"> function DisplayText() { var textboxId = '<% = txtDisplay.ClientID %>'; var comboBoxId = '<% = ddSelect.ClientID %>'; document.getElementById(textboxId).value = document.getElementById(comboBoxId).value; document.getElementById(textboxId).focus(); } </script> <asp:TextBox style="width:120px;position:absolute" ID="txtDisplay" runat="server"></asp:TextBox> <asp:DropDownList ID="ddSelect" style="width:140px" runat="server"> <asp:ListItem Value="test1" >test1</asp:ListItem> <asp:ListItem Value="test2">test2</asp:ListItem> </asp:DropDownList>

Enfin, dans le code derrière, comme dans l'exemple d'origine, j'ai ajouté les éléments suivants à la page charger: 

 protected void Page_Load(object sender, EventArgs e) { ddSelect.Attributes.Add("onChange", "DisplayText();"); }

Contrôles multiples sur une page

J'ai placé tout le code ci-dessus dans son propre contrôle d'utilisateur ASCX pour le rendre réutilisable dans mon projet. Cependant, le code présenté ci-dessus ne fonctionne que si vous avez besoin d'une seule liste déroulante DropDownList sur une page donnée.

Si vous devez prendre en charge plusieurs contrôles DropDownList personnalisés sur une seule page, il est nécessaire de définir le nom de la fonction JavaScript comme unique pour éviter les conflits. Faites ceci en utilisant de nouveau l'ID client:

Dans le fichier ASCX: 

 function DisplayText_<% = ClientID %>(){...}

Dans le code derrière: 

 /// ... ddSelect.Attributes.Add("onChange", "DisplayText_" + ClientID + "();"); ///..

C'est une façon d'éviter d'utiliser les contrôles tiers.

La solution 2 m'a fait l'affaire pour moi. Donc koodos pour Ray.

Aussi, vous devriez consulter le http://ajaxcontroltoolkit.codeplex.com/releases/view/43475 , qui est le ajaxcontroltoolkit.

Je ne crois pas que la version de Framework 4 contienne un composant comboBox, qui est ici: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx et c'est très cool. Spécialement si vous le définissez comme suit: 

 ajaxToolkit:ComboBox ID=ComboBox1 runat=server AutoPostBack=False DropDownStyle=DropDown AutoCompleteMode=Suggest CaseSensitive=False ItemInsertLocation="OrdinalText"

Vous pouvez essayer d'utiliser JOOYUI Autocomplete Combobox.
Il vous permettra de saisir le texte et de sélectionner l'élément de votre choix dans une liste déroulante.
En tant que fonctionnalité supplémentaire, il vous permet d'utiliser la fonctionnalité de saisie automatique pour obtenir une expérience UI améliorée.

J'attache une démo couplée à bootstrap 3.3.4 

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link href="https://jqueryui.com/resources/demos/style.css" rel="stylesheet" /> <style> .custom-combobox { position: relative; display: inline-block; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; } .custom-combobox-input { margin: 0; padding: 5px 10px; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #421D1D; background: #ffffff url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x !important; font-weight: normal; color: #555555; } /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 0px !important; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 0px !important; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 0px !important; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0px !important; } </style> <script> (function($) { $.widget("custom.combobox", { _create: function() { this.wrapper = $("<span>") .addClass("custom-combobox") .insertAfter(this.element); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children(":selected"), value = selected.val() ? selected.text() : ""; this.input = $("<input>") .appendTo(this.wrapper) .val(value) .attr("title", "") .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") .autocomplete({ delay: 0, minLength: 0, source: $.proxy(this, "_source") }) .tooltip({ tooltipClass: "ui-state-highlight" }); this._on(this.input, { autocompleteselect: function(event, ui) { ui.item.option.selected = true; this._trigger("select", event, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $("<a>") .attr("tabIndex", -1) .attr("title", "Show All Items") .tooltip() .appendTo(this.wrapper) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass("ui-corner-all") .addClass("custom-combobox-toggle ui-corner-right") .mousedown(function() { wasOpen = input.autocomplete("widget").is(":visible"); }) .click(function() { input.focus(); // Close if already visible if (wasOpen) { return; } // Pass empty string as value to search for, displaying all results input.autocomplete("search", ""); }); }, _source: function(request, response) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); response(this.element.children("option").map(function() { var text = $(this).text(); if (this.value && (!request.term || matcher.test(text))) return { label: text, value: text, option: this }; })); }, _removeIfInvalid: function(event, ui) { // Selected an item, nothing to do if (ui.item) { return; } // Search for a match (case-insensitive) var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children("option").each(function() { if ($(this).text().toLowerCase() === valueLowerCase) { this.selected = valid = true; return false; } }); // Found a match, nothing to do if (valid) { return; } // Remove invalid value this.input .val("") .attr("title", value + " didn't match any item") .tooltip("open"); this.element.val(""); this._delay(function() { this.input.tooltip("close").attr("title", ""); }, 2500); this.input.autocomplete("instance").term = ""; }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); })(jQuery); $(function() { $("#combobox").combobox(); $("#toggle").click(function() { $("#combobox").toggle(); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div class="ui-widget"> <select id="combobox" class="form-control"> <option value="">Select your option</option> <option value="Apple">Apple</option> <option value="Banana">Banana</option> <option value="Cherry">Cherry</option> <option value="Date">Date</option> <option value="Fig">Fig</option> <option value="Grape">Grape</option> <option value="Kiwi">Kiwi</option> <option value="Mango">Mango</option> <option value="Orange">Orange</option> <option value="Pumpkin">Pumpkin</option> <option value="Strawberry">Strawberry</option> <option value="Tomato">Tomato</option> <option value="Watermelon">Watermelon</option> </select> </div> </div> </form> </body> </html>