0

サーバー側からオートコンプリートをレンダリングしようとしています (ソース: JSON)。レンダリングされた候補の表示でエラーが発生しました。期待値をレンダリングしているように見えますが、空白に見えます。これは純粋に表示の問題のようですが、エラーの原因がわかりません

これが私のhtmlファイルで使用したコードです。

    <link href="/css/edwave-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="/js/jquery-ui-1.10.3.custom.js"></script>

       <script type="text/javascript">
    $(function() {

 // Below is the name of the textfield that will be autocomplete    
    $('#university').autocomplete({

            minLength: 2,
 // The below ruby code returns the JSON which i have checked up, [{"name":"Stanford University"},{"name":"Santa Clara University"}]

            source: '<%= university_path %>',
  // This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the suggestions which is the person.given_name.
            focus: function(event, ui) {
                $('#university').val(ui.item.name);
                return false;
            },

            select: function(event, ui) {

                $('#university').val(ui.item.name);

                            return false;
            }
        })
     // The below code is straight from the jQuery example. It formats what data is displayed in the dropdown box, is something wrong in this?

            .data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )

                    .append( "<a>" + item.name + "</a>" )
                    .appendTo( ul );
            };

    });
    </script>

<input id="university" name="university" type="text" />

ソースに使用した JSON は次のようになります (Ruby コントローラーから返されたもの)。

[{"name":"Stanford University"},{"name":"Santa Clara University"}]

私は次のことを試しました：

  1. JQuery UI ファイルをカスタム テーマから標準テーマに変更しました。それでも表示の問題が発生します。

  2. HTMLページに含まれる他のすべてのJSおよびCSSファイルを削除し、干渉がないことを確認するために次のもののみを含めましたが、それでも問題が発生します. ここに画像の説明を入力

  3. JQuery UI プラグインを使用して、フロントエンドから純粋にオートコンプリートを実行してみました。以下のコードを参照してください。これでうまくいくようです。ただし、これをバックエンドから実行する必要があります。

    <script>

$(function() {
    var universityTags = [ "Stanford University",  "Santa Clara University"];
    $( "#university" ).autocomplete({
        source: universityTags
    });
});

</script>

html に記述した JS コードは問題ありませんか? レンダリングされた表示に結果が表示されないのはなぜですか?

4

2 に答える 2

0

引用符なしで使用してみてください<%= university_path %>：

source: <%= university_path %>,
于 2013-09-07T07:55:52.537 に答える
0

私は最終的に問題を理解しました - 問題は jquery autocomplete 呼び出しにありました。以下の Javascript コードの最後のセクションのコードのように、単に「autocomplete 」ではなく「 ui-autocomplete 」にする必要があります。

.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )

                .append( "<a>" + item.name + "</a>" )
                .appendTo( ul );
        };
于 2013-09-11T17:59:09.097 に答える