jQuery UI 自动完成 - 输入与结果集不匹配时不显示结果

Posted 2023-05-09

【中文标题】jQuery UI 自动完成 - 输入与结果集不匹配时不显示结果

【英文标题】：jQuery UI autocomplete - results not shown when input does not match resultset

【发布时间】：2011-08-26 07:25:34

【问题描述】：

问题的简版

当输入字符串与结果字符串匹配时，自动完成功能有效，否则无效。数据已成功从 JSON 中检索。

加长版

我想用 JSON 数据动态编辑自动完成的源内容。

当搜索字符串匹配 first_name 和 last_name 字段时，以下方法有效。

但 JSON url 返回更多，例如通过搜索用户名它仍然返回正确的数据。但这并没有在自动完成中显示，我的理论是自动完成 UI 会强制“输入值”与“结果值”相同。

JSON 数据返回：

[
        "pk": 1012912, "fields": "first_name": "Barack", "last_name": "Obama", 
        "pk": 1017519, "fields": "first_name": "George", "last_name": "Bush"
]

自动完成代码

如您所见，结果集是由搜索功能设置的。

---

$('#search').autocomplete(
    source: [],
    search: function(event, ui)
        results = [];
        var json = jQuery.getJSON('http://jsondata.com?query='+event.target.value, function(data)
            for (var i=0; i<data.length; i++)
                results.push(data[i].fields.first_name + ' ' +data[i].fields.last_name); 
            ;
        ).success(function()
            $('#search').autocomplete('option', 'source', results);
            //The following debug proves that the 'results' are correct, even on search for usernames
            console.log(results);
        );
    ,
);

如果我在#search 字段中搜索“Barack Obama”，我会得到我的结果，没问题。 但是，如果说 Barack Obama 的用户名是“baracko”并且我搜索他的用户名，那么我会从 JSON 和结果数组中得到正确的结果（正如我使用 console.log 检查过的那样），但没有显示结果。

有人知道为什么吗？

为未来的谷歌员工或感兴趣的人提供解决方案

感谢 ek_ny 的一些提示，这是我的新 JSON：

[ 'value' : 'Barack Obama',  'value' : 'George Bush']

这里是代码：

$('#search').autocomplete(
    source: function(req, res)
        jQuery.getJSON('http://jsondata.com/?query='+req.term, req, function(data)  
            var results = [];
            $.each(data, function(i, val)
                results.push(val.value)
            );
            //Add results to callback       
            res(results);
        );           
    ,
);

【参考方案1】：

我不知道这是否有帮助，但我的自动完成设置有点不同。我使用源属性，它允许我控制对 jQuery 的回调。我的 ajax 调用以 ["id":1, "label": "Annie Hall",.....] 的形式返回项目。您可以根据数据从服务器返回的方式来修改 Ajax 调用的结果。这是我用来调用它的代码。

        $("#movieSearch").autocomplete(
            source: function(req, res)
                $.getJSON(
                    "search.aspx",
                    term : req.term,
                    function(data)
                        res(data);//you can also modify your results before you call res()
                    
                );
            
);

您的示例中让我感到困扰的一件事是变量结果，在我看来它是一个全局变量。而且我们都知道（用 Douglas Crockford 的话来说）全局变量是邪恶的。

【讨论】：

感谢您的回复。据我了解，如果您在 source: 中使用 JSON，那么它必须在 JSON 中返回带有“标签”的数据：目前我正在使用 Django，它输出“字段” - 所以我必须改变它，但那是另一个问题:) 关于全局变量：将 results = [] 放在 getJSON 中会更好吗？

【参考方案2】：

这是您在没有结果时检测的方式

source: function( request, response ) 
    $.getJSON( url, 
        term: extractLast( request.term )
    , response )
    .error(function() 
        console.log("no results");
    );
,