【问题标题】:Issue on jQuery Ui Autocomplete From URLjQuery Ui 从 URL 自动完成的问题
【发布时间】:2013-12-24 00:20:00
【问题描述】:

您能否告诉我如何使用 jQuery UI 自动完成功能从 URL 获取数据?目前我有一个代码可以很好地对付我:

var data = [
    {"label":"Aragorn", "actor":"Viggo Mortensen"},
    {"label":"Arwen", "actor":"Liv Tyler"},
    {"label":"Bilbo Baggins", "actor":"Ian Holm"},
    {"label":"Boromir", "actor":"Sean Bean"},
    {"label":"Frodo Baggins", "actor":"Elijah Wood"},
    {"label":"Gandalf", "actor":"Ian McKellen"},
    {"label":"Gimli", "actor":"John Rhys-Davies"},
    {"label":"Gollum", "actor":"Andy Serkis"},
    {"label":"Legolas", "actor":"Orlando Bloom"},
    {"label":"Meriadoc Merry Brandybuck", "actor":"Dominic Monaghan"},
    {"label":"Peregrin Pippin Took", "actor":"Billy Boyd"},
    {"label":"Samwise Gamgee", "actor":"Sean Astin"}
    ];

$(function() {

    $( "#search" ).autocomplete(
    {
        source:data,
        select: function( event, ui ) {
            $( "#search" ).val( ui.item.label + " / " + ui.item.actor );
            return false;
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a><strong>" + item.label + "</strong> / " + item.actor + "</a>" )
            .appendTo( ul );
        };      

});

和 HTML:

 <input type="text" id="search" />

但是我需要从服务器(data.json.txt)上存储的 json 文件中获取数据,而不是放在页面上。我尝试将source:data, 更改为source:data.json.txt,,但没有成功!

【问题讨论】:

    标签: jquery ajax json jquery-ui jquery-ui-autocomplete


    【解决方案1】:

    您可以尝试使用$.get() 来获取您的数据。

    $(function () {
        var data;
        $.get('data.json.txt', function (response) {
            data = response;
            $("#search").autocomplete({
                source: data,
                select: function (event, ui) {
                    $("#search").val(ui.item.label + " / " + ui.item.actor);
                    return false;
                }
            }).data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a><strong>" + item.label + "</strong> / " + item.actor + "</a>")
                    .appendTo(ul);
            };
        }, 'json');
    });
    

    确保$.get('/path/to/data.json.txt') 中的 URL 正确。

    【讨论】:

    • 嗨 Magnus,感谢您的回复,但老实说我迷路了。我应该在哪里使用 .autocomplete() 中的 $.get()?
    • 那么网址在哪里?
    • 新编辑!希望现在可以工作。我认为它不会在运行自动完成之前加载数据。
    • 那很难说是什么问题了:(尝试通过在浏览器中粘贴URL来访问json文件,只是看看是否可以访问。上面的基本概念应该是正确的,所以现在你只需要让它在你的最终工作。
    猜你喜欢
    • 2011-11-16
    • 2017-06-19
    • 2011-08-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多