基于prototype的输入自动提示autocomplete
发布时间：2018-10-16 18:16:10 所属栏目：模式 来源：站长网
导读：基于prototype的输入自动提示autocomplete效果 效果： autocomplete.js： Copy to Clipboard 引用的内容：[www.veryhuo.com]var Autocomplete = function(el, options){ this.el = $(el); this.id = this.el.identify(); this.el.setAttribute('autocomple
|
data.js 有后台控制，产生json格式数据，如下： Copy to Clipboard 引用的内容：[www.veryhuo.com]
//{query:'z',suggestions:['z','z1','z2','z3']} //{query:'q',suggestions:['q','q1','q2','q3'],numbers:[99,88,77,66]} {query:'去',suggestions:['去','去1','去12','去123'],numbers:[99,88,77,66]} 弹出提示层的原型： Copy to Clipboard引用的内容：[www.veryhuo.com]
<div class="autocomplete-w1"> <div class="autocomplete-w2"> <div style="width:299px;" id="Autocomplete_query" class="autocomplete"> <div class="selected"><strong>Li</strong>thuania<span class="number">约88个服务</span></div> </div> </div> </div css控制样式自己控制： Copy to Clipboard引用的内容：[www.veryhuo.com]
.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:4px; left:3px; /* IE6 fix: */ _background:none; _top:1px; } .autocomplete { width:300px; border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE specific: */ _height:350px;_margin:0px 6px 6px 0; overflow-x:hidden; } .autocomplete .selected { background:#F0F0F0; } .autocomplete font { padding:2px 5px; white-space:nowrap; } .autocomplete strong { font-weight:normal; color:#3399FF; } .autocomplete .number { font-weight:normal; color:red; } （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |