清除图标丢失HTML5输入类型=用ASP.NET MVC和Bootstrap搜索3

我正在研究一个MVC应用程序，并且希望添加一个X来清除当前搜索条件到我的搜索框 - 就像那个来自在HTML5中使用输入类型=默认搜索：清除图标丢失HTML5输入类型=用ASP.NET MVC和Bootstrap搜索3

下面你可以看到我当前的代码

@using (Html.BeginForm()) 
{ 
    <div class="input-group"> 
     @Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @class = "form-control", placeholder = "Search by Author or Title" }) 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button"> 
       <span class="glyphicon glyphicon-search"></span> 
      </button> 
     </span> 
    </div> 
}

来源

2017-09-05 kanpeki

它添加在htmlAttributes

@Html.TextBox("SearchString", ViewBag.CurrentFilter as string, 
    new { @class = "form-control", placeholder = "Search by Author", @type= "search" })

如果您使用引导程序，则不会显示此图标（issue）。有一个解决方法。添加以下样式覆盖默认的引导方式：

<style> 
    input[type="search"]::-webkit-search-cancel-button { 
     /*Bootstrap 3 override*/ 
     -webkit-appearance: searchfield-cancel-button !important; 
    } 
</style>

https://dotnetfiddle.net/8jcPZo

来源

2017-09-05 08:40:16 adiga

您好，感谢答复。请注意，当我添加引导时，这会停止工作：https：//dotnetfiddle.net/8UtRVA即使我本身不使用任何类。只要进行导入。两者之间似乎存在兼容性问题 - 有什么建议可以解决这个问题？ – kanpeki

显然这是[bootstrap问题]（https://github.com/twbs/bootstrap/issues/5624）。用[解决方法]更新答案和小提琴（https://github.com/running-coder/jquery-typeahead/issues/161）。 – adiga

风格hack的确带回了x按钮，但点击它只会清除搜索框。我怎样才能重置我的搜索（将currentfilter设置为“”我猜？）。 – kanpeki

清除图标丢失HTML5输入类型=用ASP.NET MVC和Bootstrap搜索3

回答

相关问题