怎么实现一个类似百度输入框,根据每个字的首字母显示能匹配相关的项。。。。
不知道怎么用ajax 书在学校。悲剧了
搜ajax搜索提示一大把,大概的思想是将经常搜索的词入库,至于你是不是放在数据库看你高兴了,然后 通过获取用户操作键盘的event.keyCode值来进行不同的操作,比如用户每输入一个字你就去搜一下数据库里面有没有这个,然后将结果ajax返回到前面展示
有ajax的插件,google一下,就知道了。
这个叫“智能感知”,AJAX实现的
智能感知,要用Ajax来实现,同时还需要DBA进行热词分析和管理。
我给楼主提供个具体思路吧 应该是这样
1 首先在输入框下放一个隐藏的 DIV
2 然后捕捉 输入框的 keyup 事件,调用Ajax 从后台获取相应的数据,展示在 输入框的 DIV中
3 然后为DIV 里的 HTML 元素 增加 上下键 事件 和 鼠标点击事件
这些弄好了 楼主可以增加点样式 就ok啦 具体代码网上搜下 很多的
jquery ui 有这个ajax 控件
这个叫做搜索建议,楼上几位说的JqueryUI中的一个插件很有用,当然要后台数据库配合
<div> <input type='text' id='ttt'></input> <ul id="list"></ul> </div> <script type="text/javascript"> function request(kword){ $.ajax({ url:'http://192.168.108.67/ajaxedu/kw.php', data:'word='+kword, type:'get', success:function(data){ var temp=eval('('+data+')'); var temphtml=''; $(temp.s).each(function(i){ alert('a') temphtml+='<li>'+temp.s[i]+'</li>'; }); $('#list').empty(); $('#list').append(temphtml); //$('#list li').each(function(j){ // $('#list:nth-child('+j+')').css('-webkit-transform','rotate('+j*20+'deg)') //}) } }) } var t=null; var last=''; var now=''; function listen(){ if(t){ clearTimeout(t); } now=$('#ttt').val(); if(now!=last){ request(now); last=now; t=setTimeout(listen,100); }else{ t=setTimeout(listen,100); } } $(listen); $('#list li').live('click',function(){ var text=$(this).text() $('#ttt').val(text); }) </script>
以上这段代码可用,就是服务器不知道还行不行,你可以换成百度或者其他的联想词api接口
- -用AJAX 调用服务器方法 返回 查询的 数据。 把数据处理下 做成 HMTL的 列表样式。 定位在输入文本框下面就行了。
autocomplete 插件去github上找找吧