没有合适的资源?快使用搜索试试~ 我知道了~
javascript suggest效果 自动完成实现代码分享
0 下载量 82 浏览量
2020-12-09
22:09:31
上传
评论
收藏 112KB PDF 举报
温馨提示
试读
4页
首先,用到的框架当然是我的框架mass Framework,当然你用其他框架也可以,如jQuery,没有什么复杂的东西。只要弄懂原理,一下子就能搞出来。想必,以后你们工作也遇到做搜索框的活儿。 由于本人没有后端,因此取用一个对象作为本地数据库。而我现在要做的,其实远远比suggest高级,类似IDE的语法提示的东西。当前成品已放到github上。 好了,我们动手吧。首先是结构层,装了FF的同学可以在百度首页查看源码,当输入几个字母时,会动态生成了那些HTML。不过怎么也好,其成就是一个DIV放到搜索栏的下方,里面放了一个table,table动态存放候选词。并且候选词如果不是用户输入的部分,
资源推荐
资源详情
资源评论
javascript suggest效果效果 自动完成实现代码分享自动完成实现代码分享
首先,用到的框架当然是我的框架mass Framework,当然你用其他框架也可以,如jQuery,没有什么复杂的东西。只要弄懂
原理,一下子就能搞出来。想必,以后你们工作也遇到做搜索框的活儿。
由于本人没有后端,因此取用一个对象作为本地数据库。而我现在要做的,其实远远比suggest高级,类似IDE的语法提示的
东西。当前成品已放到github上。
好了,我们动手吧。首先是结构层,装了FF的同学可以在百度首页查看源码,当输入几个字母时,会动态生成了那些HTML。
不过怎么也好,其成就是一个DIV放到搜索栏的下方,里面放了一个table,table动态存放候选词。并且候选词如果不是用户输
入的部分,也就是说,JS自动补充的部分它会把它们放到一个b标签加粗显示出来。不过, 我觉得用table太重量化,改用了ul
列表,为了让IE6也支持掠过变色效果,我还在里面套了一个a标签。为了放便取词,我还为它(a标签),添加了一个属性,专
门用于存放补充元整后的词汇。大抵是这个样子:
代码如下:
<div id=”search_wrapper”>
<div>
<input id=”search” autocomplete=”off”>
</div>
<div id=”suggest_wrapper”>
<ul id=”suggest_list”>
<li>
<a data-value=”完整的词汇” href=”javascript:void(0)”>
用户输入部分
<b>自动提示部分</b>
</a>
</li>
<li>
<a data-value=”完整的词汇” href=”javascript:void(0)”>
用户输入部分
<b>自动提示部分</b>
</a>
</li>
<!– 更多li 最多10个 –>
</ul>
</div>
</div>
看一看结构,其实就是两部分,div#search_wrapper为可见,div#suggest_wrapper为“不可见”(只要里面没有li元素,它就不
占空间,显示不出来了)。input搜索框有个属性autocomplete,用于关掉浏览器自带的提示功能。关于data-value,这种命名
方法是HTML5推荐的方式,用于定义要缓存的数据,data-*在新锐浏览器中会放到一个叫dataset的对象中。比如:
代码如下:
<div id=”司徒正美”
data-drink=”coffee”
data-meal-time=”12:00″>12:00</div>
我们可以通过如下方式访问到它:
资源评论
weixin_38722607
- 粉丝: 5
- 资源: 865
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功