【问题标题】:jQuery UI Autocomplete formating help, (I'm new to jQuery)jQuery UI 自动完成格式化帮助,(我是 jQuery 新手)
【发布时间】:2011-02-04 14:21:58
【问题描述】:

我一直在使用this tutorial 来制作自动完成功能。 (更新:我放弃了 jQuery UI 自动完成路线,因为它没有太多文档。)以下代码有效(最终)。我还设法让建议链接也能正常工作。我计划发表某种类型的博客文章来帮助像我这样的其他菜鸟弄清楚。 :)

$("#q").result(function(event, data, formatted) {
document.location.href = row.url;
});

$("#q").autocomplete("/a_complete.php", {
    dataType: 'json',
    parse: function(data) {
        var rows = new Array();
        for(var i=0; i<data.length; i++){
            rows[i] = { data:data[i], value:data[i].pos, value:data[i].team, value:data[i].url, result:data[i].value };
        }
        return rows;
    },
    formatItem: function(row, i, n) {
        return '<a href="' + row.url + '">' + row.value + ' <span style="float: right; font-size: 11px; color: gray; padding-right: 10px;"><strong style="">' + row.pos + '</strong> ' + row.team  +' </span></a>';
    },
    extraParams: {
        q: '',
        limit: '',
        sport: '<?=$sport?>',
        featureClass: 'P',
        style: 'full',
        maxRows: 15,
        term: function () { return $("#q").val() }
    },
    max: 25,
    scrollHeight: 300,
    width: 200
});             

【问题讨论】:

    标签: jquery json jquery-ui autocomplete


    【解决方案1】:

    我也一直想尝试使用全新的自动完成功能,但目前还没有机会……但是您看过本教程吗? http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/。里面可能有什么?

    Ooo 也发现了这个? What does formatResult and formatItem options do in JQuery Autocomplete? 来自之前的海报,看起来你必须做一些调整才能让它工作,如果失败了,你可以将数据连接成一个块并通过这种方式传递?

    希望有帮助:)

    【讨论】:

    • 感谢罗布的回复。我以前没有遇到过 tutsplus 教程,它看起来确实很有帮助。我的计划是今天放弃它,明天早上重新审视它。我的大脑需要重新启动 =P 如果其他人发现任何有用的东西,也请发帖。我相信它也可以帮助我和其他人。 :)
    • 嘿嘿,我知道这种感觉,让我知道你是如何学习 tuts+ 教程的,我想亲自体验一下!如果我想出任何好的病态在这里转贴给大家看看:)
    • 抢!!好消息,我已经走得更远了。虽然我一直在试图让转换后的输出真正进入链接。有什么想法吗?
    • 嗯,不确定...您可以尝试仅打印输出以确保您输出的内容正确,而且我不确定是否在您的额外参数中:运动:' =$sport?>' 应该是运动:"=$sport?>" ?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-07-24
    • 1970-01-01
    • 2011-09-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多