在搜索文本框中添加下拉列表答案

【问题标题】：Add dropdownlist in search textbox在搜索文本框中添加下拉列表
【发布时间】：2014-12-18 21:02:54
【问题描述】：

我需要在我的文本框中添加下拉列表以搜索用户。即，我希望下拉列表位于用于搜索用户的文本框中。这就是我现在所拥有的。

@using (Html.BeginForm())
{    
    <p>        
      City: @Html.DropDownList("UserCity", "All")
      Find by name: @Html.TextBox("SearchString") @Html.CheckBox("IsActive") Active Users               
     <input type="submit" value="Search"/>
    </p>            
}

这里的问题是城市显示在文本框上方进行搜索，但我希望它像亚马逊搜索功能一样在其中。谢谢。

【问题讨论】：

您不能简单地将这些元素放在一起。期间。
喜欢this?
您将需要开发自己的控件或使用 jquery 自动完成控件。 Example here
@Invent-Animate 是的，但我需要它带有“usercity”，因为我在我的用户控制器中使用了它
@AyoFafore 你熟悉 Bootstrap 吗？

标签： c# asp.net html asp.net-mvc-4

【解决方案1】：

您正在寻找自动完成功能，而不是文本框中的下拉列表

这里有两个很好的教程可以帮助你解决这个问题

mvc tutorial 1

mvc autocomplete tutorial

【讨论】：

她/他也可能一直在寻找类似<datalist>的东西？

【解决方案2】：

我希望在搜索框内或旁边有一个下拉列表。我正在寻找的解决方案是这个

@Html.ActionLink("Create New", "Create")
@using (Html.BeginForm(null, null, FormMethod.Get))
{         

      <div>  
               <div style="float: left; width: 300px; text-align: left;">            
           @Html.Label("SearchString", "Find By Name")
           @Html.TextBox("SearchString")
           </div>
               <div style="width:300px; margin: 0.5em 0 0 0; overflow:auto;">
           @Html.Label("UserCity", "City")
           @Html.DropDownList("UserCity", "All")
                   </div>
           <div style="margin: 0.5em 0 0 0; overflow:auto";>
           @Html.CheckBox("IsActive") Active Users                       
           <input type="submit" value="Filter" />
                   </div>
           </div>

}

【讨论】：

我认为 <datalist> 元素是您正在寻找的。当然，您可以创建一个<div>，但是这个元素会为您完成它（因为您使用 html5 标记您的问题）。关注here 了解更多信息。