Question

我有这段代码，

$(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}]，以便我对自动完成的建议将是来自数据库的数据。我该怎么做？

Answer 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的{{1}}属性，在输入X个字符之前，甚至不打扰启动请求。

Answer 2

更改

source: projects,

到

source: url_to_script

表格你将发送你的json脚本。请参阅 this example 。如果您看到源代码，则会在source属性中看到他们使用source: search.php。

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

Answer 3

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

在jquery中将数据分配给变量

3 个答案: