Question

是否可以使用常用的输入框+选择框并设置它们的样式以制作类似selectize's文本框和框的内容？就像电子邮箱一样？我试图理解他们的jQuery代码，但完全不理解任何事情，所以我想知道是否有一种简单快捷的方法来自己编程这个特定的部分，我在谷歌搜索任何关于这个的教程但是不能找到任何。

Answer 1

也许您可以使用this使文本框过滤选择框，并使用css进行正确的调整。

你甚至可以创建你的jquery插件来应用 $('myInputText').createOptionList({...});

Answer 2

这个想法本身很简单。它是文本类型的输入元素，当它聚焦时它显示了一个元素列表（li / div / span你想要的任何东西）并将它准确地放在输入下并设置样式，使它看起来像它一样。 s连接到输入（输入底部边框很短）

我为你做了一个很小的例子，试着忽略不好的造型......只是理解这个想法。

＆＃13;

.formContainer{
background-color:lightblue;
height:600px;
width: 600px;
}
#nameSelector{
width:400px;
border: 4px solid green;
}

#nameSelector:focus{
border-bottom:1px solid green;
}

#nameList{
list-style:none;
display:none;
margin:0;
margin-left:4px;
padding:0;
width:400px;
}
#nameList li{
background-color:lightgrey;
}

#nameList li:nth-child(even){
background-color:white;
}


#nameSelector:focus+#nameList{
display:block;
}

＆＃13;

<div class="formContainer">
  <input id="nameSelector" type="text"/>
  <ul id="nameList">
    <li>John</li>
    <li>Jane</li>
    <li>Celine</li>
  </ul>
</div>

＆＃13;

输入框作为选择菜单

2 个答案: