UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

采用jsonp模仿百度自动补全插件

所属分类：输入-自动完成

 24098  327  查看评论 (13)
分享到微信朋友圈
X
采用jsonp模仿百度自动补全插件 ie兼容8
 查看演示  立即下载

引入index.html里面的完整DOM复制id  和public文件夹

相关插件-自动完成
查看更多

前端模拟自动检测功能

 jQuery前端模拟自动检测功能插件AutoCheck.js
  自动完成
 28475  416

jQuery多值输入插件 jQuery Manifest

 类似QQ发送邮件收件人输入框
  自动完成
 36501  357

jQuery内容查找高亮

 支持中英文文本内容查找，不区分大小写支持跨标签内容查找支持追踪显示下一个。这个插件虽然简单不过网上仅此一份其他的查找都不可以支持跨标签查找内容并高亮
  自动完成
 25617  337

jQuery中文转拼音加员工编号计算

 用户输入中文，自动生成拼音，点击确定按钮，计算出这个姓名对应的唯一编号
  自动完成
 24443  350

讨论这个项目（13）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    李信妥 0
    2018/6/28 2:21:34
    ??那天的流星?? 0
    2018/3/20 10:24:12
    请问为什么点了GO之后不会跳转到搜索页面？ 回复
    小蓝帽 0
    2018/3/18 11:24:00
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $('#text').keyup(function() {
                var keywords = $(this).val();
                if (keywords == '') {
                    $('#word').hide();
                    return
                };
                $.ajax({
                            url: '/employee?keywords=' + keywords,
                            dataType: 'jsonp',
                            jsonp: 'cb', //回调函数的参数名(键值)key
                            // jsonpCallback: 'fun', //回调函数名(值) value
                            beforeSend: function() {
                                $('#word').append('<div>正在加载。。。</div>');
                            },
                            success: function(data) {
        小蓝帽0
        2018/3/18 11:25:13
        我的url为什么不能查出来,有点不懂,
    回复
    感冒不吃药 0
    2018/3/15 15:07:03
    这个url可以改成本地的json么？ 回复
    沉默的悲鸣曲 0
    2018/3/1 19:40:02
    /oh ppant 0
    2017/10/30 22:38:39
    非常棒的一个例子，比那些华而不实的自动完成实用的多了 谢谢 回复
    ty.Forge 0
    2017/9/28 17:32:02

    66666666666

        A0
        2017/9/29 12:14:23

        谢谢

    回复
    Me 0
    2017/9/28 15:23:43
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    $.ajax({
        url: 'http://suggestion.baidu.com/su?wd=' + keywords,
        dataType: 'jsonp',
        jsonp: 'cb', //回调函数的参数名(键值)key
        // jsonpCallback: 'fun', //回调函数名(值) value
        beforeSend: function() {
            $('#word').append('<div>正在加载。。。</div>');
        },
        success: function(data) {
            $('#word').empty().show();
            if (data.s == '') {
                $('#word').append('<div class="error">Not find  "' + keywords + '"</div>');
            }
            $.each(data.s, function() {
                $('#word').append('<div class="click_work">' + this + '</div>');
            })
        },
        error: function() {
            $('#word').empty().show();
            $('#word').append('<div class="click_work">Fail "' + keywords + '"</div>');
        }
    })
    1
    2
    3
    4
    5
    6
    http://suggestion.baidu.com/su?wd=跨域
        window.baidu.sug({
            q: "跨域",
            p: false,
            s: ["跨域访问", "跨域请求", "跨域ajax", "跨域问题", "跨越速运", "跨域 cookie", "跨域请求解决方案", "跨域问题怎么解决", "跨域的几种方式", "跨域攻击"]
        });

    我想请问下这个跨域 是怎么接收的值  有什么规则

        A评论奖励 1 jQ币
        2017/9/28 16:05:46

        不好意思 才看见   采用的jQuery的ajax如果发送成功将会执行

        1
        success:function(data){}

        这个函数 它的返回值会赋值给

        1
        success:function(data){ }

        里面的data    此时的data为一个json格式的数组  你可以在火狐浏览器中的开发者-web控制台-网络   中查看数组   当中数据的键为s   要想取得数组中的键格式为 data.s  此时data.s也为数组 然后采用jquery中的$.each循环 展示出来   有不懂得随时可以提问   

    回复
    为你而战野狼 0
    2017/9/28 10:26:47

    棒棒哒

        A0
        2017/9/28 16:07:23

         thank,you

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复