Невозможно добавить панель поиска в раскрывающийся список - PullRequest
Новая
       33

Невозможно добавить панель поиска в раскрывающийся список

0 голосов
/ 07 мая 2020

Я создал свой первый проект в среде ASP. Net с MVC и пытаюсь включить раскрывающийся список с возможностями поиска. Я пытаюсь создать что-то вроде this , но в итоге получаю this . Я пробовал bootstrap selectpicker, select2 и другие, но не могу изменить стиль раскрывающегося списка.

Вот мой код: 

<script>
    $(document).ready(function () {
        $('.selectpicker').selectpicker({
            liveSearch: true,
            showSubtext: true
        });
    });
</script>
<div class="form-group">
    @Html.LabelFor(model => model.MaterialPN, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @*@Html.EditorFor(model => model.MaterialPNID, new { htmlAttributes = new { @class = "form-control" } })*@
        @Html.DropDownListFor(model => model.MaterialPNID, ViewBag.MaterialPNListItems as IEnumerable<SelectListItem>, new
        {
            @class = "form-control selectpicker",
            data_show_subtext = "true",
            data_live_search = "true"
        })
    </div>
</div>

EDIT: я создал совершенно новый, ванильный раствор, чтобы проверить это. В Visual Studio я создал новое решение ASP. Net C# с MVC, затем добавил библиотеку Bootstrap -select в NuGet. 

public class Student
    {
        public int StudentId { get; set; }
        [Display(Name = "Name")]
        public string StudentName { get; set; }
        public Gender StudentGender { get; set; }
    }

    public enum Gender
    {
        Male,
        Female,
        Other
    }

И добавил раскрывающийся список в о странице: 

@using SearchableDropdown.Models
@model Student
@{
    ViewBag.Title = "About";
}
<script>
    $(document).ready(function () {
        $('.selectpicker').selectpicker({
            liveSearch: true,
            showSubtext: true
        });
    });
</script>
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<p>Use this area to provide additional information.</p>
@Html.DropDownList("StudentGender",
                    new SelectList(Enum.GetValues(typeof(Gender))),
                    "Select Gender",
                    new
                    {
                        @class = "form-control selectpicker",
                        data_show_subtext = "true",
                        data_live_search = "true"
                    })

Я все еще вижу то же самое - раскрывающийся список без четкой возможности поиска. Когда я выберу раскрывающийся список и начну вводить текст, он выберет элемент, который начинается с вводимых мной букв, но это не настоящая возможность поиска.

1 Ответ

0 голосов
/ 07 мая 2020

Используйте ссылку ниже https://select2.org/getting-started/basic-usage#multi -select-box-pillbox

HTML

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

JS

$(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});
...