jquery自动完成没有拿起数组

Posted

技术标签:

【中文标题】jquery自动完成没有拿起数组【英文标题】:jquery autocomplete not picking up array 【发布时间】:2018-10-13 17:33:26 【问题描述】:

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

我的网页只在本地运行,所以我不能显示它,但是我有代码(留下了一些部分,例如 doctype 和 head 以便于阅读):

    <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 的自动完成功能拾取。有谁知道为什么“resp”不用于自动完成?

【问题讨论】:

【参考方案1】:

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

【讨论】:

以上是关于jquery自动完成没有拿起数组的主要内容,如果未能解决你的问题,请参考以下文章

用 PHP 数组填充 JQuery 自动完成

如何从 php mysql 查询中为 jQuery 自动完成准备多维数组?

jQuery 中的自动完成功能只是...停止工作?

如何将 JSON 对象内的 JSON 数组传递给 jQuery 自动完成

导航 json 文件以创建 jquery 自动完成所需的数组

为 jquery 自动完成重新格式化数组