J'ai une liste d'énumérations comme ci-dessous et j'essaie de la rendre consultable comme exemple ci-dessous de w3schools car elle va contenir environ 60 éléments.La liste déroulante sera donc basée sur la recherche.
<div class="form-group">
<label asp-for="Location" class="control-label"></label>
<select asp-for="Location" class="form-control" asp-items="@Html.GetEnumSelectList<LocationType>()"></select>
<span asp-validation-for="Location" class="text-danger"></span>
</div>
4 Réponses :
Il n'y a pas de liste déroulante de recherche prête à l'emploi pour MVC.
Vous devez utiliser une sorte d'implémentation personnalisée.
Vous pouvez utiliser quelque chose comme ceci: liste déroulante de saisie semi-automatique dans MVC5?
Une autre solution serait de créer une zone de texte pour rechercher et soumettre la valeur, utiliser linq dans les valeurs d'énumération et lier le nouvel énumérable avec les valeurs filtrées. Si vous ne voulez pas de publication complète, vous devez faire un appel ajax avec javascript
Vous pouvez utiliser un plugin jquery comme 'select2' pour rechercher. Et vous pouvez utiliser le code ci-dessous pour obtenir des éléments Enum.
var items = Enum.GetNames(typeof(LocationType));
Utilisez un plugin jquery comme celui-ci ou d'autres plugins: http://jsearchdropdown.sourceforge.net/
Voici une démonstration pour utiliser Select2 dans votre rasoir:
<select id="locationSelect" asp-for="Location" class="form-control" asp-items="@Html.GetEnumSelectList<LocationType>()" >
</select>
@section Scripts{
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css"/>
<script>
$(document).ready(function () {
$("#locationSelect").select2();
});
</script>
}
Résultat:
cela fonctionne bien mais je ne sais pas pourquoi le champ de recherche ne s'affiche pas
@Momen Alnaser Peut-être que votre CSS n'est pas appliqué correctement?
Je n'ai pas rencontré de problème avec mon css avant et si oui, dans quelle section il pourrait avoir le problème de ne pas semer le champ de recherche, car la recherche fonctionne pour les éléments qui ne sont tout simplement pas affichés
@Momen Alnaser Je veux dire le dans mon anwser. Pourriez-vous le voir dans l'onglet Sources du navigateur F12
@Momen Alnaser Cela devrait aimer i.stack.imgur.com/wa0t5.png
Avez-vous regardé select2? select2.org/searching