加快jQuery的自动完成(不可避免地长列表) [英] Speeding up jQuery AutoComplete (Unavoidably long lists)

查看:103
本文介绍了加快jQuery的自动完成(不可避免地长列表)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我开始我的旅程jQuery的自动完成早先今天下午要加快,并决定它可能是一个好主意,开始的 memcaching 的一切。正如本文中建议:加快自动完成

不过,我仍然缓慢的响应时间,即使在安装和使用的 Memcached的处理后

在我的情况的问题是,我处理的非常长的列表,在我的情况下,在 6700 个人会员。 (全属或所有植物的种种质)

瓶颈似乎被构造表和填充客户端列表,它不是由从检索信息引起的 Memcached的

如果别人遇到了这方面的问题,我很乐意听到的一个聪明的方法来解决它。我会后下我的code。

注:此特定网页不可用的普通群众,我知道有几个巨大的安全漏洞


  require_once'OO / database.php中';$ MySQLdb的=新的数据库;$ =内存缓存内存缓存新;
$ memcache->连接('localhost'的,11211)或死亡(无法连接到内存缓存);$的SQL =SELECT DISTINCT`Genus` FROM importlist.plants$键= MD5(查询$的SQL);$结果= $ memcache->获得($键);
//检查,如果我们得到了一些回报
如果($结果== NULL){    //从数据库中获取
    $结果= $ mysqldb-> rawSelect($ SQL) - GT;的getResult();    //设置为内存缓存,1小时后过期
    $ memcache->设置($键,$结果,0,3600);
}//结果数组
$属=($ memcache->获得($键));//添加所需的自动完成引号
的foreach($属为&放大器; $属){
    $属='。$属[属]。'';
}
$属=破灭($属,,);// PHP生成的jQuery
回声<<< EOT    <脚本>
    $(函数(){
        VAR availableTags = [$属]
        $(#tags).autocomplete({
            来源:availableTags
        });
    });
    < / SCRIPT>
EOT;?><输入ID =标签/>


解决方案

  $(文件)。就绪(函数(){    //一旦页面加载,使AJAX请求,让您自动完成列表,并应用到HTML
    $阿贾克斯(网址:{url:/path-to-get-tags-as-json.php',
        键入:GET,
        的contentType:应用/ JSON
        成功:函数(标签){
            $(#tags).autocomplete({
                来源:标签
            });
        }
    });
});

将URL到PHP文件在生成上述AJAX占位符UR​​L参数自动完成列表。在你的PHP code,修改列表生成,使其返回值的JSON数组,像这样:

  [第一,第二,anotherEntry,中,中,阵]

这将绝对不会加快这一进程服务器端,但它的将会保护用户免受一些延迟在应用自动完成名单。这在很大程度上假定用户不会立即去执行需要自动完成一个动作,你仍然可以加载页面,并允许用户执行其他操作。自动完成列表的装载应大部分出现沉默,浑然一体。

这是伟大的加载时间是不到几到几秒钟,但如果它带你长于那么用户可能仍然会碰到麻烦的可用性

如果仍有服务器端的延迟,请考虑使用一些时间声明,试图确定瓶颈。

I began my journey to speed up jQuery's autocomplete earlier this afternoon, and decided it was probably a good idea to begin memcaching everything. As suggested in this article: Speeding up autocomplete.

However, I am still dealing with slow response time even after installing and using Memcached.

The problem in my case is that I am dealing with extraordinarily long lists, in my case, over 6700 individual members. (All genera or genuses of all plants)

The bottleneck seems to be constructing the table and populating the client-side list, and it is not caused by retrieving the information from Memcached.

If anybody else has run into this particular problem, I would love to hear of a clever way to solve it. I will post my code below.

Note: This particular page is unavailable to the general public, and I am aware there are a few gaping security holes.


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" />

解决方案

$(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
            });
        }
    });
});

Place the URL to your PHP file at generates the autocomplete list in the above AJAX placeholder url parameter. In your PHP code, modify the list generation so that it returns a JSON array of values like so:

[ "first" , "second" , "anotherEntry" , "in" , "the" , "array" ]    

This will definitely not speed up the process server side, but it will protect your users from some of the delays in applying the autocomplete list. This largely assumes that the user doesn't instantly go perform an action that requires autocomplete, you can still load the page and allow the user to perform other actions. The loading of the autocomplete list should for the most part appear silent and seamless.

This is great for load times that are less than a few to several seconds, but if it's taking you longer than that then your users may still run into usability trouble.

If there are still server-side delays, consider using some timing statements to try and determine where the bottleneck is.

这篇关于加快jQuery的自动完成(不可避免地长列表)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆