Реализация редактируемого DropDownList в ASP.NET - PullRequest
6 голосов
/ 30 октября 2008

Какой самый элегантный способ реализации DropDownList в ASP.NET, который можно редактировать без использования сторонних компонентов.

В качестве последнего средства я, вероятно, попытаюсь использовать TextBox с AutoCompleteExtender с изображением для «выпадающего» списка; или TextBox, перекрывающий HTML Select с некоторым JavaScript, чтобы заполнить значения от Select до TextBox. Но я очень надеюсь, что есть более лаконичное и понятное решение.

Заранее спасибо.

Ответы [ 3 ]

5 голосов
/ 20 октября 2009

Один элемент управления на странице

Вы можете следовать этому простому примеру для редактируемого списка DropDown в Project Code , который использует стандартные элементы управления ASP.NET TextBox и DropDownList в сочетании с некоторым JavaScript.

Однако код не работал для меня, пока я не добавил ссылку для получения значений ClientID для TextBox и 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>

Наконец, в коде, как и в предыдущем примере, я добавил следующее к загрузке страницы:

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


Несколько элементов управления на странице

Я поместил весь вышеприведенный код в собственный пользовательский элемент управления ASCX, чтобы его можно было многократно использовать в моем проекте. Тем не менее, приведенный выше код работает, только если вам требуется только один редактируемый DropDownList на данной странице.

Если вам нужно поддерживать несколько пользовательских элементов управления DropDownList на одной странице, необходимо задать уникальное имя функции JavaScript, чтобы избежать конфликтов. Сделайте это еще раз, используя ClientID:

в файле ASCX:

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

в коде позади:

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

Это один из способов избежать использования сторонних элементов управления.

1 голос
/ 03 марта 2017

Вы можете попробовать использовать комбинированный список автозаполнения JqueryUI.
Это позволит вам вводить текст, а также выбирать нужный элемент из раскрывающегося списка.
В качестве дополнительной функции она позволяет использовать функцию автозаполнения для улучшения пользовательского интерфейса.

Я прилагаю демонстрацию, которая связана с начальной загрузкой 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>
Я проверил этот код на всех нижеприведенных настройках Среда тестирования:
Браузер Chrome версии 43.0.2334.0 dev-m (64-разрядная версия)
Internet Explorer 11
Firefox 36.0.1
Visual Studio 2013 выпуск

Надеюсь, это решит вашу проблему.

1 голос
/ 10 февраля 2011

Решение 2 здесь помогло мне. так кудо для Рэя.

Также вы должны взглянуть на http://ajaxcontroltoolkit.codeplex.com/releases/view/43475,, который является ajaxcontroltoolkit.

Я не верю, что версия для framework 4 поставляется с компонентом comboBox, который здесь: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx и очень классный. Особенно, если вы установите его так:

ajaxToolkit:ComboBox ID=ComboBox1 runat=server AutoPostBack=False 
   DropDownStyle=DropDown  AutoCompleteMode=Suggest  
               CaseSensitive=False ItemInsertLocation="OrdinalText" 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...