jQuery自动完成跨站点域 - 列表框不显示

时间:2017-11-05 08:38:17

标签: php jquery json autocomplete cross-domain

我想对外部数据使用自动完成功能。我按照手动和数据顺利返回,但列表框没有显示。有人可以帮帮我吗?

这是我的js:

$('.hledejNACE').autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "ac.php",
            dataType: "jsonp",
            data: {term: request.term},
            success: function( data ) { response( data ); }
        });  
    },
    minLength:1,
    select:function(evt, ui) {
        // when a name is selected, populate related fields in this form
        this.form.kodNACE.value = ui.item.kodNACE;
    }
}); 

Mozilla dev工具说,数据以JSON格式成功返回。

这是我的HTML:

<form onsubmit="return false;">
    Name: <input id="hledejNACE" type="text" class="hledejNACE" style="width:250px;"/>
    Code: <input id="kodNACE" type="text" disabled />
</form>

我已将这些脚本关联起来:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

1 个答案:

答案 0 :(得分:0)

好吧,我找到了解决方案:

您需要在PHP json返回中使用回调:

<?php

    $data = '{}'; // json string

    if(array_key_exists('callback', $_GET)){

        header('Content-Type: text/javascript; charset=utf8');
        header('Access-Control-Allow-Origin: http://www.example.com/');
        header('Access-Control-Max-Age: 3628800');
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

        $callback = $_GET['callback'];
        echo $callback.'('.$data.');';

    }else{
        // normal JSON string
        header('Content-Type: application/json; charset=utf8');

        echo $data;
    }
?>

感谢大家的努力!