0

我有这个代码，

$(function() {
    //var asd = '<?php $regions_list_full; ?>';
    var projects = [
        {
            value: "jquery",
            label: "jQuery",
            desc: "the write less, do more, JavaScript library",
            //icon: "jquery_32x32.png"
        },
        {
            value: "jquery-ui",
            label: "jQuery UI",
            desc: "the official user interface library for jQuery",
            //icon: "jqueryui_32x32.png"
        },
        {
            value: "sizzlejs",
            label: "Sizzle JS",
            desc: "a pure-JavaScript CSS selector engine",
            //icon: "sizzlejs_32x32.png"
        }
    ];


    $( "#find" ).autocomplete({
        minLength: 0,
        source: projects,
        focus: function( event, ui ) {
            $( "#find" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#find" ).val( ui.item.label );
            //$( ".module h1" ).val( ui.item.value );
            $(":header.title").html(ui.item.value);
            //$( "#project-description" ).html( ui.item.desc );
            //$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

            return false;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
            .appendTo( ul );
    };
    });

实际上这是来自 的自动完成jQueryUI，并且我有一个从数据库中获取的值数组。我想要的是将我的值替换为var projects =[{value:asd}]这样的值，以便我对自动完成的建议将是数据库中的数据。我该怎么做？

4

3 回答 3

1

您不想使用source: projects 您可能想使用这样的 AJAX 调用为源定义一个函数

$( "#search_address" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: '/path/to/script',
            dataType: 'json',
            data: 'whatever you need here', // i.e. term value
            dataFilter: function (data, type) {
                // do whatever you need to here to change data into proper autocomplete array format
                // if JSON data is already in correct format you can just do this.
                response($parseJSON.(data));
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                // handle error here
            },
            success: function(data) {
                // maybe check for case of empty data object here (i.e. successful URL request, but no data returned)
                return data;
            }
        });
    }
});

现在，您通常希望限制 API 返回的结果数量（最多可能 10 或 20 条记录），因为在自动完成中显示 1000 个项目可能是一种糟糕的 UI 体验。在良好的自动完成中，输入几个字母后结果的数量应该会显着减少。这也使您的脚本执行得更好，因为您只处理少数返回的记录。出于同样的原因，您可能还想使用 的minLength属性，autocomplete甚至在输入 X 个字符之前都无需启动请求。

于 2012-09-14T20:54:59.563 回答
0

jQuery 自动完成将向您在 url 中提供的source:url 发送一个查询字符串，这个查询字符串会term 记住这一点，因为我不认为自动完成文档告诉您，然后从那里您使用术语 querysting 来查询数据库并发回以 term 开头的项目，您不会请求数据库中的每一行并将它们存储在 javascript 变量中，这没有意义 - 如果数据库中有 2,000,000 个条目怎么办？

于 2012-09-14T20:44:58.453 回答
0

改变

source: projects,

至

source: url_to_script

形成您将发送 json 的脚本。请参阅此示例。source如果您查看源代码，您会在他们使用的属性中看到source: search.php.

同样，您可以使用自己的脚本路径并从该脚本返回一个 json 数据，该数据将来自服务器。

于 2012-09-14T20:40:47.580 回答