怎么实现一个类似百度输入框,根据每个字的首字母显示能匹配相关的项。。。。
不知道怎么用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上找找吧