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

标签 jquery jquery-ui autocomplete jquery-autocomplete jquery-ui-autocomplete

问题的简短版本

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

更长的版本

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

当搜索字符串与名字和姓氏字段匹配时,以下方法有效。

但是 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 检查的那样),但结果不会显示。

有人知道为什么吗?

为 future 的 Google 用户或感兴趣的人提供的解决方案

感谢 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);
        });           
    },
});

最佳答案

我不知道这是否有帮助,但我的自动完成设置有点不同。我使用 source 属性,它允许我控制对 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 的话说)全局变量是邪恶的。

关于jQuery UI 自动完成 - 输入与结果集不匹配时不显示结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6015515/

相关文章:

jQuery UI Datepicker 导致 Internet Explorer 崩溃

jQuery UI 悬停重复

jquery - 是否有一个 jquery List 插件可以自动排序项目并具有强大的添加/删除方法?

Firefox 3 地址栏自动完成依赖项

javascript - 未捕获的类型错误 : Object function () has no method 'replace'

javascript - 使用多个选择下拉列表过滤 HTML 表

jquery - 在 jQuery UI 对话框中使用外部 CSS

jquery - 自定义 jquery 自动完成组合框 css

android-layout - 当我将 <merge> 作为 <layout> 的子项时,自动完成功能不起作用

javascript - jQuery AJAX 响应以字符串 blob 形式出现