首页 新闻 搜索 专区 学院

怎么实现一个类似百度输入框,根据每个字的首字母显示能匹配相关的项。

0
悬赏园豆:10 [待解决问题]

怎么实现一个类似百度输入框,根据每个字的首字母显示能匹配相关的项。。。。

不知道怎么用ajax 书在学校。悲剧了

微笑的辛翼的主页 微笑的辛翼 | 初学一级 | 园豆:111
提问于:2012-07-08 17:57
< >
分享
所有回答(10)
-1

搜ajax搜索提示一大把,大概的思想是将经常搜索的词入库,至于你是不是放在数据库看你高兴了,然后 通过获取用户操作键盘的event.keyCode值来进行不同的操作,比如用户每输入一个字你就去搜一下数据库里面有没有这个,然后将结果ajax返回到前面展示

jevinss | 园豆:154 (初学一级) | 2012-07-08 18:40
-1

有ajax的插件,google一下,就知道了。

悟行 | 园豆:12240 (专家六级) | 2012-07-08 23:30
-1

这个叫“智能感知”,AJAX实现的

90后1场梦 | 园豆:244 (菜鸟二级) | 2012-07-09 09:49
-1

智能感知,要用Ajax来实现,同时还需要DBA进行热词分析和管理。

jerry-Tom | 园豆:4077 (老鸟四级) | 2012-07-09 11:23
0

我给楼主提供个具体思路吧  应该是这样

1  首先在输入框下放一个隐藏的 DIV

2  然后捕捉 输入框的 keyup 事件,调用Ajax 从后台获取相应的数据,展示在 输入框的 DIV中

3  然后为DIV 里的 HTML 元素 增加 上下键 事件 和 鼠标点击事件  

这些弄好了 楼主可以增加点样式 就ok啦  具体代码网上搜下 很多的

jquery ui 有这个ajax 控件

havid | 园豆:70 (初学一级) | 2012-07-09 11:25
0

这个叫做搜索建议,楼上几位说的JqueryUI中的一个插件很有用,当然要后台数据库配合

Halower | 园豆:1723 (小虾三级) | 2012-07-09 12:34
0
<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接口

shawn.xie | 园豆:210 (菜鸟二级) | 2012-07-14 12:53
0

- -用AJAX 调用服务器方法 返回 查询的 数据。  把数据处理下  做成 HMTL的 列表样式。 定位在输入文本框下面就行了。

Mundo Novo | 园豆:82 (初学一级) | 2012-07-30 17:22
0

jquery文档就够了,不用书

Bluishoul | 园豆:212 (菜鸟二级) | 2012-08-13 16:29
0

autocomplete 插件去github上找找吧

collapsar | 园豆:260 (菜鸟二级) | 2013-09-10 17:46
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册