加快jQuery AutoComplete(不可避免的长列表)

Rya*_*ard 5 php jquery memcached autocomplete

我在今天下午早些时候开始加速jQuery的自动完成,并决定开始记忆所有内容可能是一个好主意.正如本文所述:加速自动完成.

但是,即使在安装和使用Memcached之后,我仍然处理缓慢的响应时间.

在我的情况下,问题是我正在处理非常长的列表,在我的情况下,超过6700个个人成员.(所有植物的所有属或属)

瓶颈似乎是构建表并填充客户端列表,而不是从Memcached检索信息引起的.

如果有其他人遇到这个特殊问题,我很想听到一个聪明的方法来解决它.我将在下面发布我的代码.

注意:此特定页面对公众不可用,并且我知道存在一些有缺陷的安全漏洞.


require_once 'oo/Database.php';

$mysqldb = new Database;

$memcache = new Memcache;
$memcache->connect('localhost', 11211) or die ("Could not connect to memcache");

$sql = "SELECT DISTINCT `Genus` FROM importlist.plants";

$key = md5('query'.$sql);

$result = $memcache->get($key);


//check if we got something back
if($result == null) {

    //fetch from database
    $result = $mysqldb->rawSelect($sql)->getResult();

    //set to memcache, expires after 1 hour
    $memcache->set($key,$result,0,3600); 
}

//Result array
$Genera = ($memcache->get($key));

//Add required "quotation marks" for autocomplete
foreach ($Genera as &$Genus){
    $Genus = '"'.$Genus[Genus].'"';
} 
$Genera = implode($Genera,',');

//PHP to generate jQuery    
echo <<< EOT

    <script>
    $(function() {
        var availableTags = [$Genera];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>
EOT;

?>

<input id="tags" />
Run Code Online (Sandbox Code Playgroud)

jmo*_*253 5

$(document).ready(function() {

    // once page loads, make AJAX request to get your autocomplete list and apply to HTML
    $.ajax({ url: '/path-to-get-tags-as-json.php',
        type: "GET",
        contentType: "application/json",
        success: function(tags) {
            $( "#tags" ).autocomplete({
                source: tags
            });
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

将URL放到PHP文件中,在上面的AJAX占位符url参数中生成自动完成列表.在您的PHP代码中,修改列表生成,以便它返回一个JSON数组值,如下所示:

[ "first" , "second" , "anotherEntry" , "in" , "the" , "array" ]    
Run Code Online (Sandbox Code Playgroud)

肯定不会加速进程服务器端,但它可以保护您的用户免受应用自动完成列表的一些延迟.这主要假设用户不会立即执行需要自动完成的操作,您仍然可以加载页面并允许用户执行其他操作.加载自动完成列表应该在很大程度上显示为无声且无缝.

这对于小于几秒到几秒的加载时间非常有用,但是如果它花费的时间比那么长,那么用户可能仍会遇到可用性问题.

如果仍然存在服务器端延迟,请考虑使用一些时序语句来尝试确定瓶颈所在.

  • 正是我在想什么.做出改变并不难,它会使它看起来更像Web 2.0,可能会更快一点.我还应该补充一点,Afonso可能需要在返回JSON数组之前将PHP中的内容类型设置为"application/json",以便浏览器将其识别为JSON. (4认同)