jQuery UI 自动完成 IE 问题

Question

首先是我的代码

   $(function() {
        var suggest;
        $("#guestname").keyup(function() {

            $.ajax({
                async: true,
                url: '../include/searchGuest.php',
                dataType: 'json', 
                data: 'searchTxt=' + $(this).val() + '&festival_id=<?php echo $festival_id;?>', 
                success: function(data) {
                    suggest = data;
                    get_autocomplete(suggest);
                }   
            });
        });
    });


    function get_autocomplete(suggest) {
      $("#guestname").autocomplete({
        minLength: 3,
        source: suggest
      });
    }

我使用这个 jQuery 函数来获取客人列表。用户填写一个名称为“John”的输入字段。 Ajax 正在数据库中搜索名字或姓氏包含“John”的客人。在同一个脚本（PHP）中，我创建了一个 JSON 对象，它看起来像 ["1234:John Doe","...","..."] （数字是这个客人的 ID，猜这不重要，只想提一下）。 然后我将 JSON 传递给 jQuery UI 的自动完成功能。

在 FF 和 Chrome 中一切正常，在获得 JSON 形式的结果后，输入字段下方会打开一个小窗口并显示所有匹配项。 在 IE9 中，它根本不工作，但我从来没有得到完整的 JSON 对象。此外，大多数情况下，我必须写下几乎全名才能匹配 - 'Sulliv' 才能获得像'Sullivan' 这样的姓氏。在 FF 中写 'Sul' 就足够了。

Guest 数据库中有大约 8.1k 个条目。 IE 不能处理这么大的 JSON，还是我必须改进我的脚本。这是 IE 和 JSON 或 jQuery 的常见问题吗？

Answer 1

您应该只初始化一次自动完成小部件，然后您可以使用source 选项在服务器上执行过滤：

$("#guestname").autocomplete({
    minLength: 3,
    source: function (request, response) {
        $.ajax({
            async: true,
            url: '../include/searchGuest.php',
            dataType: 'json', 
            data: 'searchTxt=' + request.term + '&festival_id=<?php echo $festival_id;?>', 
            success: function(data) {
                response(data)
            }   
        });        
    }
});

• request.term 是用户搜索的字词。
• response 是您必须使用自动完成候选者调用的回调函数。