js文本框下拉提示(智能提示)

经常用浏览器搜索东西的时候,肯定会发现,只要随便输入一个字,百度就会有智能下拉提示,觉得体验挺好的!
然而自己却不知道怎么实现,不用担心,下面介绍一个简易轻量级的方法,已经整理好文件,可以直接下载使用:

实现效果如下: 引用文件:jquery.js autoComplete.js

css

<style type="text/css">
 ul,li{margin: 0;padding: 0;list-style-type: none;}
 a:hover{text-decoration:underline;}
 .txt{width:210px;height:25px;border:1px solid #ccc;line-height:25px;padding:0 5px;}
 .autoDis{border:1px solid #999;position:absolute;overflow:hidden;display: none;}
 .autoDis p{line-height:25px;cursor:default;padding:0 5px;}
 .autoDis li{line-height:25px;cursor:default;padding:0 5px;background-color:#fff;}
 .autoDis .cur{background:#ccc;}
</style>

html

<div id="wrap">
 <input id="autoCom" type="text" class="txt">
</div>

javascript

<script type="text/javascript">
 var c=$('.txt');
 var data=['13612345564', '13825646464', '13825646465', '13412236054', '13012348564', '13012345564', '13012365564', 'www.ljiong.com'];
 var aaa=new autocom(data);
 aaa.autoComplete.init().bind(c);
</script>

查看下载: 在线演示源码下载

觉得不错,赞助我:




0

效果图如下:

js文本框下拉提示(智能提示)

ljiong 2016/02/17 16:21

I’m fine.

回复

356688 2016/02/12 10:02

It’s not bad

回复