Question

我正在寻找一种将文本框和下拉列表组合为一个组件的方法，用户可以在其中键入其值，也可以从下拉列表中的现有值列表中进行选择。有没有任何自动完成功能或comboxbox的方法？

我正在使用带有Razor语法的C＃ASP.NET-MVC。我的视图如下：

<div class="table-responsive" id="divGrid">
<br />
  <div class="form-group" style="padding:5px">
     <label>Page Title: </label>&nbsp;   @Html.TextBoxFor(m => m.Title, new { @id = "pagetitle", @class = "form-control" })
   </div>
   <div class="form-group" style="padding:5px">
     <label>Page Title: </label>&nbsp;   @Html.DropDownListFor(m => m.Title, ViewData["pageTitleList"] as List<SelectListItem>, new { @id = "pagetitle", @class = "form-control" })
    </div>
    <div class="form-group" style="padding:5px">
      <label>Page Number: </label>&nbsp;   @Html.DropDownListFor(m => m.PageNumber, ViewData["pageNumberList"] as List<SelectListItem>, new { @id = "pagenumber", @class = "form-control" })
     </div>
     <div class="form-group" style="padding:5px">
       <label>Sequence Number: </label>&nbsp;    @Html.DropDownListFor(m => m.Sequence, ViewData["sequenceNumberList"] as List<SelectListItem>, new { @id = "sequencenumber", @class = "form-control" })
      </div>
      <div class="form-group" style="padding:5px">
        <label>Edition Name: </label>&nbsp;    @Html.DropDownListFor(m => m.Editionid, ViewData["editionNameList"] as List<SelectListItem>, new { @id = "editionnumber", @class = "form-control" })
       </div>
       <input type="hidden" id="pageid" value="@Model.Pageid" />
       <input type="hidden" id="pubid" value="@Model.PubId" />
</div>

我希望将Page Title字段转换为一个组件。当前，我有一个@TextBoxFor从数据库中获取值，另一个组件是@Html.DropDownListFor，其中包含所有建议值的列表。

我的要求是用户可以编辑文本或从下拉列表中选择建议的值。

所有Controller方法都可以正常工作以返回值。还可以根据需要合并任何AJAX个呼叫。

注意：该字段不需要验证。它可以是任何值，这意味着用户可以键入他们想要的内容，或者从建议的标题列表中进行选择。

另一个说明：键-值对的下拉绑定中，下拉列表的两个属性都只有Text。

有什么建议吗？

谢谢。

Answer 1

您所描述的功能似乎正是组合框的功能。

如果您仅在客户端需要此功能，则可以自己使用javascript（使用div / ul> li面板和文本框）制作一个，也可以查看基于Web组件的组合框。

也许vaadin components combobox是一个有用的选择。

Answer 2

因此，我可以使用JQuery和CSS的样式来对各个组件进行实现。因此，例如，如果您将TextBoxFor和DropDownList作为单独的组件，则可以参考下面的代码将它们组合到一个带有下拉列表的可编辑文本框中，作为选择。

在我的视图中，我使用的是强类型模型绑定，其中Title是模型中的string类型。 DropDownListFor的来源来自我的Controller，它可以来自数据库或硬编码值。这完全取决于您的要求。我正在使用ViewData将列表值从Controller传递到View，但是您也可以使用ViewBag。

<div class="form-group" style="padding:5px">
    <label>Page Title: </label>&nbsp;  
    @Html.DropDownListFor(m => m.Title, ViewData["pageTitleList"] as List<SelectListItem>, new { @id = "pagetitleDropwDown", @class = "editableBox" })
    @Html.TextBoxFor(m => m.Title, new { @id = "pagetitle", @class = "pageTitleBox",@name="pageTitleBox" })           
</div>

要设置以上两个组件的样式，可以使用以下CSS样式并根据需要进行调整。我试图使它尽可能接近Bootstrap元素的form-control类，因为其他元素正在使用Bootstrap类。

<style>
    .editableBox {
        width: 252px !important;
        height: 40px !important;
        border-radius: 4px !important;
        border-color: #CCC !important;   
    }

    .pageTitleBox {
        width: 231px !important;
        margin-left: -255px !important;
        height: 35px !important;
        border: none !important;
        padding: 6px 12px;
    }
</style>

现在，进入JQuery部分，您首先必须将文本框的html分配给下拉列表的选定值，即onchange事件。一旦完成，另一部分就是简单地将分配的id的值获取到文本框，然后根据需要使用该值。该值可以是从下拉列表中选择的值，也可以是用户在文本框中输入的值。

<script>

    $(document).ready(function(){       
      $(".editableBox").change(function(){         
        $(".pageTitleBox").val($(".editableBox option:selected").html());
      });    
     });

     if ($("#pagetitle").val() == "") {
        alert("Please enter page title!");
        return false;
     }
     else
     {
      var pagetitle = $("#pagetitle").val();
      alert("You have selected or entered: " +pagetitle);
      //Use AJAX to send it to the server or do what you require
     }  

</script>

将文本框与下拉菜单结合使用，以使一个组件可以键入值或从下拉列表中选择

2 个答案: