![](/img/trans.png)
[英]Modify my code, I want to replace select drop down list to input box with autocomplete feature
[英]I want to create autocomplete select box
我的html代码是:
<select class="form-control" id="city" style="width:100%; margin-left:2%;">
<option>Sonal</option>
<option>abcd</option>
<option>3</option>
<option>4</option>
<option>aaaa</option>
</select>
我想要的是:如果我想选择abcd。 然后将有两种选择方法。
第二步,在选择框中键入一个键,然后相关的答案将被过滤。
例如:当我们在选择框中输入“ a”时,必须在下拉菜单中过滤两个选项。
1.abcd 2.aaaa
看看这些演示小提琴
想法是将选择列表中的值与具有过滤器文本的选项重新绑定。
$('<option>').text(option.text).val(option.value).attr('rel', option.rel)
Refrences
http://dragonfruitdevelopment.com/filter-a-select-menu-with-jquery/
如果我了解您的问题,您的答案是<datalist>
controll
这是w3的一个例子
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
它是输入和下拉菜单的结合,用户可以写入并过滤下拉菜单...
您可以使用jQuery自动完成功能 ,该功能可为任何解决方案提供所有灵活性。
/*This is a generical editable select, with a function can control all editableselect in a html or php page */
//html
<input type="text" name="maquina" id="maquinain" syze="30"/>
<input type="button" class="btnselect" id="maquina" value="v"/>
<div class="select" id="maquinadiv">
<div class="suggest-element" id="something">something</div>
<div class="suggest-element" id="something1">something1</div>
<div class="suggest-element" id="something2">something2</div>
<div class="suggest-element" id="something3">something3</div>
</div>
//css
.suggest-element{
margin-left:5px;
cursor:pointer;
}
.select {
position:absolute;
z-index: 100;
width:350px;
border:1px solid black;
display:none;
background-color: white;
}
//javascrip-jquery
$('.btnselect').click(function(){
//get input and div
var inp = $(this).attr('id')+"in";
var div = $(this).attr('id')+"div";
//show the div
document.getElementById(div).style.display = 'block';
//click in select
$('.suggest-element').click(function(){
//get id of the click element
var id = $(this).attr('id');
//Edit the input with the click element data
document.getElementById(inp).value=id;
//hide the div
document.getElementById(div).style.display = 'none';
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.