jQuery-ui Autocomplete 显示结果错误答案

【问题标题】：jQuery-ui Autocomplete display results wrongjQuery-ui Autocomplete 显示结果错误
【发布时间】：2016-10-25 23:29:56
【问题描述】：

我正在使用 jQuery-ui 自动完成功能来创建一个带有远程数据源的搜索字段。一切正常，我得到了结果，但是结果并没有像预期的那样显示在文本字段下方的列表中。结果被放入列表并显示在页面底部。这是我的代码：

<script>

$(function() {

$( "#autocomplete" ).autocomplete({
source: function(request,response)
{
    $.ajax({
        url: "<?php echo $this->webroot; ?    >portfolios/ajax_clients_dropdown/"+request.term+".json?callback=ajax_clients_dropdown?",           
       // dataType: "text", 
        async: false,
        //jsonp: "callback",
        jsonpCallback: "ajax_clients_dropdown",
        success: function(data)
        {
          var fin = [];
          for(a=0;a<10;a++)
          {
            fin[a]= data[a].value;
          }

          console.log(fin);
          response(fin);
          console.log("success");
        },
        appendTo: "#autocomplete",
        position: {'my': 'left top', 'at': 'left top', 'of': '#autocomplete'},

        error: function(response){console.log("Fail");}

    });

}

});
}); 

</script>

<div class = "ui-widget" id="container">
<label for ="autocomplete">Clients</label>
<input id = "autocomplete" style ="" autocomplete = "on">
</div>

无论天气如何，我都用#container 或#autocomplete 执行appendTo，它什么都不做。

这是应该显示的结果：

["3434a62c bf592581", "a3ee7766 7894a7e0", "ea41d8ec 4e7df334", "919f6fac 96d4cdf0",     "24ecac17 bfbed443", "f0270fc4 a2659300", "ea803fac 94b43df4", "5337467f 1a41e158",     "fc54b844 0a19b69e", "a7393c7b aaea998b"]

有人知道为什么会这样吗？

【问题讨论】：

你为什么使用 `jsonpCallback: "ajax_clients_dropdown" ？
ajax_clients_dropdown 是我正在调用的控制器中的函数名称。当我把它放在那里时它起作用了，遗憾的是我不明白为什么它是必要的。

标签： ajax jquery-ui autocomplete

【解决方案1】：

我认为这里可能存在一些问题。如果您只想要显示的默认行为，那么您不需要弄乱appendTo 或position。请尝试以下操作：

<script>
$(function() {
    $( "#autocomplete" ).autocomplete({
        source: function(request,response) {
            $.ajax({
                url: "<?php echo $this->webroot; ?>portfolios/ajax_clients_dropdown/"+request.term+".json?callback=ajax_clients_dropdown?",           
                // dataType: "text", 
                async: false,
                //jsonp: "callback",
                jsonpCallback: "ajax_clients_dropdown",
                success: function(data) {
                    var fin = [];
                    for(a=0;a<10;a++)
                    {
                        fin[a]= data[a].value;
                    }
                    console.log(fin);
                    response(fin);
                    console.log("success");
                },
                error: function(response){console.log("Fail");}
            });
        }
    });
});
</script>

<div class="ui-widget" id="container">
<label for="autocomplete">Clients</label>
<input id="autocomplete" style="" autocomplete="on">
</div>

除了数据源，你说的工作，这应该和我的here一样。

【讨论】：

您的页面上可能存在 id 冲突。如果您将自动完成替换为其他不会冲突的名称，它会起作用吗？
不行，我改了id，结果还是一样。

【解决方案2】：

编辑：此答案不能解决问题，请参阅 cmets 了解详细信息。

您的 appendTo 和 position 属性已分配给 AJAX 请求，而不是自动完成调用。缩进固定后更容易看到。

$(function() {
    $( "#autocomplete" ).autocomplete({
        source: function(request,response) {
            $.ajax({
                url: "<?php echo $this->webroot; ?>portfolios/ajax_clients_dropdown/"+request.term+".json?callback=ajax_clients_dropdown?",           
                // dataType: "text", 
                async: false,
                //jsonp: "callback",
                jsonpCallback: "ajax_clients_dropdown",
                success: function(data) {
                    var fin = [];
                    for(a=0;a<10;a++)
                    {
                        fin[a]= data[a].value;
                    }
                    console.log(fin);
                    response(fin);
                    console.log("success");
                },
                error: function(response){console.log("Fail");}
            });
        },
        appendTo: "#autocomplete",
        position: {'my': 'left top', 'at': 'left top', 'of': '#autocomplete'}
    });
});

【讨论】：

太棒了！谢谢，我没有意识到这是我在做什么。我对其进行了更改，使其看起来像您发布的代码。可悲的是，这个问题并没有解决。所发生的只是列表从中心的底部和稍偏左的位置移动到页面的左上角。
另外，这仅发生在我将 appendTo 和 position 中的 #autocomplete 更改为 #container 之后。当它是#autocomplete 时，什么都不会发生。
网页是 cakephp 烤出来的，好像自动完成与蛋糕发生冲突。当列表显示在底部时，它会显示在蛋糕元素之后。

【解决方案3】：

对于那些有这个问题的人，首先确保你去这里：

https://jqueryui.com/autocomplete/

并且您正在引用正确的 css 和 jquery 文件。接下来，这是我在 ASP.NET MVC 4 中的问题。我创建了一个包，使用
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( “~/Content/themes/base/core.css”，...... 但是当我在布局页面中引用它时，我没有调用 @Styles.Render("~/Content/themes/base/css") 我调用的是 @Scripts.Render("~/Content/themes/base/css") .

这导致

 <script src="/Content/themes/base/jquery-ui.css"></script>

插入而不是

<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet"/>

所以对于那些使用 MVC 遇到这种情况的人来说，可能就是这样，或者您可能只是没有正确引用正确的 css 和 js 文件。

【讨论】：