Question

我决定使用jQuery UI来实现与插件相对的自动完成，因为我读到插件已被弃用。我的总体目标是拥有一个自动完成搜索栏，它可以访问我的数据库，并以类似谷歌的方式返回用户对城市/州或邮政编码的建议。截至目前，我甚至不确定是否正在调用.autocomplete函数。我抓住了我所拥有的一切，并决定从基础开始。我从http://jqueryui.com/download下载了最新版本的jQuery UI，并试图让他们在http://jqueryui.com/demos/autocomplete/使用它的示例。我所包含的所有脚本似乎至少通过Dreamworks连接，因此我相当确定我所包含的路径是正确的。我所包含的CSS和Javascripts直接从下载中保持不变。下面是我的HTML代码和我的后端PHP代码，它返回JSon格式化数据。请帮我。也许我需要包含一个处理JSon返回数据的函数，但我试图按照这个例子，虽然我看到他们使用了本地数组。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryUI Demo</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" type="text/css" />
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>
</script>


<script type="text/javascript">


$(document).ready(function() {
    $("#tags").autocomplete({
        source: "search_me.php"
    });
});
</script>
</head>

<body>
<div class="demo">

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->
</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['term'])); //gets the location of the search

$return_arr = array();

if(is_numeric($location)) {

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

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

    extract($row);
    $row_array['zipcode_id'] = $zipcode_id;

    array_push($return_arr, $row_array);


    }
}

mysql_close($db);
echo json_encode($return_arr);
?>

感谢您的想法。这是一个更新。

我使用firebug检查了xhr，并确保它正在响应感谢该提示。还有上面的PHP代码我没有初始化$ return_arr所以我照顾了。还要感谢澄清所需的js，而不是要求。现在，当我输入一个邮政编码时，一个大约一厘米的小盒子出现在它下面，但我看不出有什么东西在那里，我猜不会。我进入我的php页面并将其设置为手动将变量设置为“9408”并直接通过浏览器加载php页面以查看它返回的内容。这就是它返回的内容。

[{"zipcode_id":"94089"},{"zipcode_id":"94088"},{"zipcode_id":"94087"},{"zipcode_id":"94086"},{"zipcode_id":"94085"},{"zipcode_id":"94083"},{"zipcode_id":"94080"}]

然后我在这个网址http://jsonformatter.curiousconcept.com/找到了一个JSON代码验证器，它告诉我我的代码实际上是返回JSON格式的数据。再帮我解决问题的建议就太棒了。

经过更多研究后，我偶然发现了另一篇文章的答案。 jquery autocomplete not working with JSON data

JSON返回的数据几乎必须包含Label或Value或两者。将zipcode_id切换到我的$ row_array中的值，然后......热潮就是炸药！

Answer 1

您的脚本（js文件）引用不正确，应该只是：

<!-- the jquery library -->    
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script>
<!-- the full compressed and minified jquery UI library -->
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>

文件“jquery.ui.core.js”，“jquery.ui.widget.js”和“jquery.ui.position.js”是分开的开发文件，jquery ui库被拆分为模块。< / p>

文件“jquery-ui-1.8.17.custom.min.js”包含所有内容，压缩和缩小！

关于数据源，如自动完成文档的“概述”部分所述：使用URL时，它必须返回以下形式的json数据：

一个简单的字符串数组：['string1', 'string2', ...]
或带有标签（和值 - 选项）属性的对象数组[{ label: "My Value 1", Value: "AA" }, ...]

我真的不熟悉PHP，所以请确保你的php脚本返回其中一个： - ）

jQuery UI Autocomplete无法弄明白

1 个答案: