Question

html5如何实现文本框下拉选项功能

使用html5或者jQuery如何实现文本框下拉效果，如下图
求大神详解最好有代码例子

Answer 1

可以使用HTML5 list 属性。list 属性需要应用到 input 框上，然后内容写一个自定义的 id
然后在任意位置放一对 datalist 标签，并给 datalist 框一个 id，和 list 属性指向的 id 一致即可。
在 datalist 标签下放列表项，每个列表项用 option 元标签来表示，option 标签里用 value 属性填写内容，label 属性来做提示。
下面是示例代码：
<form action="">
<input type="text" list="url_list" name="text" />
<input type="submit" />
</form>
<datalist id="url_list">
<option label="HZ赫兹工作室" value="http://weibo.com/hz421247910" />
<option label="提示1" value="列表项1" />
<option label="提示2" value="列表项2" />
<option label="" value="列表项3" />
</datalist>
HTML5之前一般使用select标签或者div+js实现

Answer 2

这个是js写的，如果你会jq代码，那我给你提供一下思路，如果不会那你就在网上搜一下“select框美化”。

追问

会点jq代码，球大胜给个思路，最好能给个简单的代码

追答

样式我就不说了，这个不用select，用普通的input，下面的弹出窗用一个div（默认隐藏），点击这个input，下面的显示。然后点击对应的值（如“北京”），那就将这个标签的text赋值给上面的input。思路就是这样，html和css懒得写。你先自己写着试试，用到的事件是click，方法有text()、show()、hide()就ok了，你如果不知道这些是干嘛的那就百度一下，很简单，会jq的就能写出来，不会再追问，会了就采纳吧