Bootstrap实现弹性搜索框,typeahead插件实现搜索框自动补全的方法

你或者感兴趣的篇章:

  • BootStrap中有关Select下拉框选用触发事件及扩张
  • Bootstrap模块dropdown达成下拉框响应
  • Bootstrap框架下下拉框select寻找功效
  • Bootstrap
    select多选下拉框实今世码
  • 自定义Angular指令与jQuery达成的Bootstrap风格数据双向绑定的单选与多选下拉框
  • bootstrap
    datetimepicker完毕分钟选取下拉框
  • Bootstrap
    select达成下拉框多选功能
  • 运用Bootstrap
    typeahead插件达成搜索框自动补全的方法
  • Bootstrap3制作找出框样式的点子
  • 依照bootstrap完结多少个下拉框相同的时候搜寻效果

delay:内定延时纳秒数后,才正真向后台恳求数据,防止卫输入过快导致频繁向后台央浼,暗中认可:500

如此那般做,我们只可以获得选中哪项,而一旦大家选中哪项,需求传递特殊的音讯,这一年该怎么做呢。

<form action="" method="get" class="form-horizontal">
<div class="input-group search-input-group">
<input type="hidden" name="scope" value="1">
<input name="key" autocomplete="off" type="text" class="form-control" placeholder="输入要搜索的内容关键字" >

<button type="submit">

</button> 

</div>
</form>
<form id="searchform" class="navbar-form navbar-right" role="search" target="_blank" method="get" action="/Search/Index">
<div class="form-group">
<input type="text" id="searchWords" name="searchWords" class="form-control" data-provide="typeahead" autocomplete="off" placeholder="请输入要搜索关键词">
</div>
<button type="submit" class="btn" id="searchbtn">
搜索
</button>
</form>

你恐怕感兴趣的文章:

  • Bootstrap
    select多选下拉框完毕代码
  • Bootstrap模块dropdown落成下拉框响应
  • Bootstrap框架下下拉框select寻找功用
  • bootstrap
    datetimepicker完结秒钟选取下拉框
  • bootstrap
    suggest下拉框使用详解
  • Bootstrap
    select完成下拉框多选功效
  • 依赖BootStrap
    multiselect.js完结的下拉框联合浮动成效
  • 依照bootstrap完成五个下拉框同有时候索求效果
  • Bootstrap组合上、下拉框轻易完结代码
  • 依靠Bootstrap下拉框插件bootstrap-select使用方式详解

接下去通过本文给咱们介绍Bootstrap达成弹性找寻框的代码,一齐看下吧。

setValue:function(item)
{}。选中提示列表某项时,设置文本输入框中展现的值以及实际需求得到的值。再次来到值格式:{‘data-value’:item[“输入框突显值的
item属性”],’real-value’:item[“实际须求得到值的item属性”]},中期可通过文件输入框的real-value属性获取该
值;

<div class="page-header">
<div class="form-horizontal">
<div class="control-label col-lg-0">
</div>
<div class="col-lg-2">
<select class="form-control" onchange="selectOnchang(this)">
<option>所有申请商家</option>
<option>待审核商家</option>
<option>未通过审核商家</option>
<option>已通过审核商家</option>
</select>
</div>
</div>

对应的CSS:

接触到的机关补全插件首要有三个:autocomplete和typeahead。本站使用的是typeahead.

也等于说,作者在当选的还要,想获取丰裕value值,那年咋办。

Bootstrap是Twitter推出的八个用于前端开采的开源工具包。它由Instagram的设计员Mark奥托和Jacob Thornton同盟开辟,是三个CSS/HTML框架。

那便是贴代码的流弊之一:寻觅框快被网上老铁讥讽坏了!!!有故意输入空格的,有输入or
1=1的,有alert的,有html乱入的…….况兼好像还在嘲弄,随他们去吧,只要开心就好。

<div class="page-header">
<div class="form-horizontal">
<div class="control-label col-lg-0">
</div>
<div class="col-lg-2">
<select class="form-control" onchange="selectOnchang(this)">
<option value="all">所有申请商家</option>
<option value="check_pending">待审核商家</option>
<option value="no">未通过审核商家</option>
<option value="yes">已通过审核商家</option>
</select>
</div>
</div>

如上所述是小编给大家介绍的Bootstrap达成弹性寻找框的一体汇报,希望对我们具有扶助,借使大家想领悟越来越多内容邀约关心脚本之家网址!

Bootstrap实现弹性搜索框,typeahead插件实现搜索框自动补全的方法。自动补全插件-bootstrap-3-typeahead

这几个很好化解:

<script src="~/Scripts/jquery-1.9.0.js"></script> 
<script src="~/Scripts/bootstrap.js"></script> 
<script src="~/Content/js/bootstrap3-typeahead.js"></script>

此间运用的就是onchange和selectedIndex。

若想把寻觅图标放到输入框的前方,bootstrap其实是不援助的,须要和睦定制一下。

实际代码如下:

function selectOnchang(obj){ 
var value = obj.options[obj.selectedIndex].value;
alert(value);
}
.search-input-group .input-group-addon{
background: white !important; 
}
.search-input-group .form-control{
border-right:0; 
box-shadow:0 0 0; 
border-color:#ccc;
}
.search-input-group{
width: 40%;
}
.search-input-group button{
border:0;
background:transparent;
}
.search-input-group input:focus + button{
z-index:3;
}
.search-input-group input{
-webkit-transition: width 0.2s ease-in-out;
-moz-transition:width 0.2s ease-in-out;
-o-transition: width 0.2s ease-in-out;
transition: width 0.2s ease-in-out;
}
.search-input-group input:focus{
width: 500px;
}

Html代码:

selectedIndex: 设置或重回下拉列表中被选项目标索引号。