jquery自动完成没有拾取数组

时间:2018-05-03 11:51:20

标签: javascript jquery jquery-ui autocomplete

我正在建立一个网站。在网站上我有一个搜索表单,应该使用自动完成功能来查找数据库中的数据。后端部分已准备就绪,但前端部分我无法使其工作。我发现这篇文章:Is it possible to change the Url which JQuery's JQueryUI Autocomplete generates?但看起来似乎没有在搜索栏中使用响应。

我的网页只能在本地运行,所以我无法显示它,但是我的代码(保留了一些部分,例如doctype,并且易于阅读):

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

</head>
<body>
<div class="ui-widget">
    <label for="country-by-name">Country: </label>
    <input id="country-by-name">
</div>
<script type="text/javascript">
$("#country-by-name").autocomplete({
    source: function(req, resp){
                $.get('/data/country/by-name/'+ encodeURIComponent(req.term), function(json){
                    var numCountries = json['countries'].length;
                    if(numCountries > 0){
                        var countryNames = [];
                        for(var i = 0; i < numCountries; i++){
                            countryNames.push(json['countries'][i]['name']);
                        }
                        resp = countryNames;
                        console.log(resp);
                    }else{
                        resp = [];
                    }
                    return resp;
                });
            },
    minLength: 2
});
</script>

后端工作正常,如果我转到:/ data / country / by-name / zi然后它返回json:

{"countries": [{"id": 812, "name": "Brazil"}, {"id": 995, "name": "Swaziland"}, {"id": 1033, "name": "Zimbabwe"}]}

这也是javascript的选择,因为如果我在console.log()中显示:

(3) ["Brazil", "Swaziland", "Zimbabwe"]

所以数据存在,但jquery的automcomplete函数没有获取。有没有人知道为什么&#34; resp&#34;不用于自动完成?

1 个答案:

答案 0 :(得分:0)

解决了这个问题。我没有意识到&#34; resp&#34;是一个回调函数。所以我应该使用resp(countryNames)