让 jQuery 自动完成功能与 PHP 源一起工作答案

【问题标题】：Getting jQuery autocomplete to work with PHP source让 jQuery 自动完成功能与 PHP 源一起工作
【发布时间】：2012-05-09 09:59:59
【问题描述】：

我有一个带有此代码的 jQuery 自动完成字段：

 var tags = ["a", "ab", "abc", "abcd", "adbce", "abcdef", "abcdefg", "abcdefgh", "abcdefghi", "abcdefghij", "abcdefghijk", "abcdefghijkl", "abcdefghijklm", "abcdefghijklmn", "abcdefghijklmno", "abcdefghijklmnop", "abcdefghijklmnopq", "abcdefghijklmnopqr", "abcdefghijklmnopqrs", "abcdefghijklmnopqrst", ];
      $("input#name").autocomplete({
        position: {
          offset: "0 -10px",
        },
        source: tags
      });

使用 'tags' 数组作为示例输入数据可以正常工作。

现在我需要一组 MySQL 查询结果而不是那个示例数组。我所做的是将函数调用更改为：

$("input#name").autocomplete({
        position: {
          offset: "0 -10px",
        },
        source: "http://absolutepathtofile/autosuggest.php"
      });

我使用绝对路径来确保我没有在那里犯一些愚蠢的错误，因为我无法让文件返回到自动完成中。我去过 jQuery 文档并找到了一些使用 PHP/MySQL 来返回自动完成结果的示例，但我无法让它工作。

这是我在 autosuggest.php 中尝试过的：

$term = $_REQUEST['term'];
$query = "SELECT * FROM merchants WHERE business_name LIKE '%$term%'";
$result = mysql_query($query);

$k=0;
while($row=mysql_fetch_array($result)){

    $aUsers[$k]=$row['business_name'];
    $k++;

}

echo json_encode($aUsers);

我让它尽可能简单，但它不起作用。

然后我测试了 JSON 是否正在发送，所以我这样做了：

$array[0]="test";
$array[1]="test1";

echo json_encode($array);

而且它不起作用。我在任何地方都找不到这个问题，我做错了什么？ PHP版本是5.3.10，有json_encode（以前用过）。

【问题讨论】：

尝试使用 firebug 或 chrome 控制台查看是否有任何 javascript/http 请求错误。 getfirebug.com。这些是编写js不可缺少的工具。如果您无法弄清楚，请尝试在 jsfiddle.net 上设置测试用例
没有Javascript错误，我已经用firebug检查过了。
您的代码似乎存在 SQL 注入漏洞。
萤火虫是否显示对absolutepathtofile/autosuggest.php的请求？该请求会产生什么结果？
@Mark：这是示例代码，我只需要让它与自动完成功能一起工作，我以后会担心注入。

标签： php javascript jquery mysql jquery-autocomplete

【解决方案1】：

$.ajax({
     url:"http://absolutepathtofile/autosuggest.php",
     type:"post",
     success:function(html){
         $("#user_phone").autocomplete(
            {position: {offset: "0 -10px"},
            source: html
         });
     }   
});

为我工作出色并经过测试

【讨论】：

【解决方案2】：

当我们没有可用的 json_encode 时，我编写了这个自定义脚本来让下拉菜单在我们的代码中工作，希望它可以帮助您解决问题。

'get_xref_values()' 函数只是根据提供的参数构建一个数组，GET - 'term' - 是自动完成文本框中的文本，它由控件自动添加。

“点击”代码只是在用户点击它以及键入时自动生成自动完成下拉菜单。

这里是 jquery：

$("#libraryEventAspectRatio" ).autocomplete({
    source: "/dropDowns/autoXref.php?category=" + "aspectratio",
    matchContains: true,
    minLength: 0
}).click(function(){
    $("#libraryEventAspectRatio" ).autocomplete('search', $(this).val());
});

这里是php：

//this page creates simple data for a drop down box to use (jquery's UI autocomplete)

$category       = get_input_get("category");
$description    = get_input_get("term");
$select_field   = get_input_get("selectField");
$select_value   = get_input_get("selectValue");

$order_by       = "description";

$xref_data      = get_xref_values($category, $order_by, $description, $select_field, $select_value);

$str = "[";

foreach ($xref_data as $row):
    $str .= '"' . $row['description'] . '",';
endforeach;

//chop off the last comma
if (count($xref_data)) {
    $str = substr($str,0,-1);
}

$str .= "]";

echo $str;

【讨论】：