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 自动完成调用中。它应该是“ ui-autocomplete ”，而不仅仅是“ autocomplete ”，如下面的 Javascript 代码最后一部分的代码所示：

.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 回答