Question

我正在使用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"]

有谁知道为什么会这样？

Answer 1

编辑：此答案无法解决问题，请参阅评论以了解详情。

您的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'}
    });
});

Answer 2

我认为这里可能存在一些问题。如果您只想显示默认行为，那么您就不应该混淆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相同。

Answer 3

对于那些遇到此问题的人，首先要确保你到这里：

https://jqueryui.com/autocomplete/

您正在引用正确的css和jquery文件。接下来，这是我在ASP.NET MVC 4中的问题。我创建了一个包，使用
bundles.Add（new StyleBundle（“〜/ Content / themes / base / css”）。包括（ “〜/ 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文件。

jQuery-ui自动完成显示结果错误

3 个答案: