jQuery自动完成插件pengoworks版本无法正常工作

时间:2012-01-22 00:03:23

标签: jquery

您好我正在使用jQuery插件(pengoworks版本),我有一个问题...当我最初在文本框中输入内容时,它会提示建议框。但是,在我在文本框中键入几个字母后,如果我暂停,然后继续键入,它将只过滤掉,在下面的建议框中填充的内容,而不是再次运行查询以获得新结果。但是每次我在最初的暂停后按下后退键时它会重新运行查询...我希望你能理解我在说什么。对不起任何不清楚的事情,我是编程新手。我将提供我的html页面和我的php页面。

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>
    <script type="text/javascript" src="jquery-1.7.1.js"></script> 
    <script type="text/javascript" src="jquery.autocomplete.js"></script>
    <link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />


   <script type="text/javascript">
        $(document).ready(function() {
            $('#input_box').autocomplete("autocomplete_search.php");

        })
    </script>
   </head>

    <body>

        <input type="text" name="input_box" value="" id="input_box"   />

    </body>
    </html>

这是我的PHP部分。

    <?php
    include 'fh.inc.db.php';

    $db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or 
    die ('Unable to connect. Check your connection parameters.');
    mysql_select_db(MYSQL_DB, $db) or die(mysql_error($db));

    $location = htmlspecialchars(trim($_GET['q'])); //gets the location of the search

    if(is_numeric($location)) {

       $query = "SELECT
           zipcode_id
       FROM
           user_zipcode
       WHERE
           zipcode_id LIKE '%$location%'
       ORDER BY zipcode_id DESC LIMIT 10";
    $result = mysql_query($query, $db) or die(mysql_error($db));

    } elseif(is_string($location)) {

    $query = "SELECT
            city
        FROM
           user_zipcode
       WHERE
           city LIKE '%$location%'
       ORDER BY city DESC LIMIT 10";
    $result = mysql_query($query, $db) or die(mysql_error($db));


    }


    while($row = mysql_fetch_assoc($result)) {

    extract($row);
    if(is_numeric($location)){
       echo "$zipcode_id \n";
    }elseif(is_string($location)){
       echo "$city \n"; 
    }

    }

   ?>

1 个答案:

答案 0 :(得分:1)

编辑:插件初始化中的错误

似乎插件中存在一个棘手的错误,使您忽略的选项matchSubset: 0被忽略并更改为1.

在初始化期间,基于作为第二个参数传递的选项和一些默认值构建options对象:

...
options.delay = options.delay || 400;
options.matchCase = options.matchCase || 0;
options.matchSubset = options.matchSubset || 1;
...

这种做法和数字变量存在问题:matchSubset: 0在条件语句中返回false!在我们的例子中,matchSubset将始终等于1!

我理解为什么它会这样做。您使用相同的表示法来检查变量undefined,因为它也返回false。但是在数字的情况下,它不能按预期工作。

如果您不能使用其他插件,我建议您更改默认选项的合并方式。你可以像这样做:

//options.matchSubset = options.matchSubset || 1;
options.matchSubset = typeof matchSubset !== undefined
    ? options.matchSubset
    : 1;

你也可以创建一个defaults对象文字并使用$.extend()来合并默认值和选项,就像这通常是在jquery插件中完成的。


初步答案

默认情况下,该插件使用缓存系统。如果当前查询不在缓存中,则插件会检查是否存在子集。

因此,假设您键入“Foo”,插件会进行查询并缓存结果。然后你添加一个“t”,导致查询“脚”。该插件将找不到“Foot”的条目,但会找到一个“Foo”条目,因此它将过滤此列表而不是发出新请求。

// "q" is the query text
function loadFromCache(q) {
    if (!q) return null;
    if (cache.data[q]) return cache.data[q];
    if (options.matchSubset) {
        for (var i = q.length - 1; i >= options.minChars; i--) {
            var qs = q.substr(0, i);
            var c = cache.data[qs];
            if (c) {
                var csub = [];
                for (var j = 0; j < c.length; j++) {
                    var x = c[j];
                    var x0 = x[0];
                    if (matchSubset(x0, q)) {
                        csub[csub.length] = x;
                    }
                }
                return csub;
            }
        }
    }
    return null;
};

您可以通过将选项matchSubset明确设置为零来控制此行为:

$('#input_box').autocomplete("autocomplete_search.php", { matchSubset: 0 });

documentation

开始
  

matchSubset(默认值:1)
    自动填充程序是否可以使用缓存进行更具体的查询。这意味着“foot”的所有匹配都是“foo”的所有匹配的子集。通常情况确实如此,使用此选项可降低服务器负载并提高性能。请记住将cacheLength设置为更大的数字,例如10。