扫码关注官方订阅号
http://www.39.net/http://hao.360.cn/ 也就是这两个网站上搜索框之前的选择搜索种类的效果,以前从没接触过js,现在要求一个上午写出来,哭了,谁能给个思路?或者是现成的源码,谢了,用jquery也行
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
直接用CSS也能制作很棒的下拉菜单的说,这里给你推荐一篇文章:如何利用 CSS 製作多級選單? 希望能帮到你。
jquery有个Plugin可以用:jQuery AutoComplete Bootstrap也有类似的Plugin:Bootstrap typeahead
原理上来说就是在Keyup的时候做regular expression的匹配,在下拉框里插入符合条件的结果,然后显示隐藏的下拉框。还有很多细节可以考虑,比如鼠标点下拉框如何,有些时候keyup的时候需要用AJAX去后台拿结果,如果点击了除了搜索框和下拉框的其他地方,下拉框应该隐藏等细节。
其实思路比较简单的,我也简单说一下,最普通的方式: 1、把样式都写好,包括下拉框显示出来的效果,一般为了达到弹出菜单的效果,所以用绝对定位对展开的下拉框进行定位 2、把写好的下拉框用 css 进行隐藏 3、给要触发下拉框的元素绑定事件,click 或者 mouseover,然后触发事件的时候,判断切换一下下拉框的显示和不显示
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
直接用CSS也能制作很棒的下拉菜单的说,这里给你推荐一篇文章:如何利用 CSS 製作多級選單?
希望能帮到你。
jquery有个Plugin可以用:jQuery AutoComplete
Bootstrap也有类似的Plugin:Bootstrap typeahead
原理上来说就是在Keyup的时候做regular expression的匹配,在下拉框里插入符合条件的结果,然后显示隐藏的下拉框。还有很多细节可以考虑,比如鼠标点下拉框如何,有些时候keyup的时候需要用AJAX去后台拿结果,如果点击了除了搜索框和下拉框的其他地方,下拉框应该隐藏等细节。
其实思路比较简单的,我也简单说一下,最普通的方式:
1、把样式都写好,包括下拉框显示出来的效果,一般为了达到弹出菜单的效果,所以用绝对定位对展开的下拉框进行定位
2、把写好的下拉框用 css 进行隐藏
3、给要触发下拉框的元素绑定事件,click 或者 mouseover,然后触发事件的时候,判断切换一下下拉框的显示和不显示