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プロパティを使用して、 autocompleteX文字数が入力されるまでリクエストを開始することさえしないようにすることもできます。

于 2012-09-14T20:54:59.563 に答える
0

変化する

source: projects,

に

source: url_to_script

jsonを送信するスクリプトを作成します。この例を参照してください。ソースコードを見ると、sourceプロパティで使用されていることがわかりますsource: search.php。

同様に、独自のスクリプトパスを使用して、そのスクリプトからjsonデータを返すことができます。このデータは、サーバーから取得されます。

于 2012-09-14T20:40:47.580 に答える
0

jQueryオートコンプリートは、URLで指定したURLにクエリ文字列を送信しますsource:。このクエリ文字列はterm 覚えておいてください。オートコンプリートのドキュメントでそのように言われているとは思わないので、そこからクエリ文字列という用語を使用してデータベースにクエリを実行します。そして、termで始まるアイテムを送り返します。データベースのすべての行を要求してjavascript変数に格納するのではなく、意味がありません。データベースに2,000,000のエントリがある場合はどうなりますか？

于 2012-09-14T20:44:58.453 に答える