Ajax：如何为 Jquery 自动完成输出数据答案

【问题标题】：Ajax: How to output data for Jquery autocompleteAjax：如何为 Jquery 自动完成输出数据
【发布时间】：2013-08-18 15:22:22
【问题描述】：

我正在尝试从这里使用 Jquery 的自动完成功能 http://jqueryui.com/autocomplete/#default

但我的输出无法使用它。

Here's my FIDDLE. 我不得不手动将 json 插入到数组中，因为 JsFiddle 不允许外部数据库的...

PHP：

<?php 
  include('../../dbconn.php');
  //--------------------------------------------------------------------------
  // Example php script for fetching data from mysql database
  //--------------------------------------------------------------------------
  $databaseName = "accounting";
  $tableName = "generalTransactions";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------

  $con = mysql_connect($gaSql['server'],$gaSql['user'],$gaSql['password']);
  $dbs = mysql_select_db($databaseName, $con);
  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------

  $result = mysql_query("SELECT * FROM $tableName ORDER BY `id` DESC LIMIT 1 ");          //query
  $array = mysql_fetch_row($result);                          //fetch result                          
  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($array);

?>

小提琴中的 Ajax：

$(function() {
    var availableTags = [
        ["23","1500-0900","Profit On Sale Of Fixed Assets","Income Statement","Other Income","","","2013-07-26 10:22:07","Demo Admin"],
        ["13","1500-0920","Profit On Sale Of Fixed Assets","Income Statement","Other Income","","","2013-07-23 13:42:45","Demo Admin"],
        ["14","3100-1200","Other Assets 002 - Owned - Depreciation","Income Statement","Expenditure","Depreciation","","2013-07-23 13:47:06","Demo Admin"],
        ["12","3200-1120","Other Assets 001 - Leased - Depreciation","Income Statement 3","Expenditure","Depreciation","","2013-07-23 13:48:42","Demo Admin"],
        ["16","3300-0800","Bank Charges","Income Statement","Expenditure","","","2013-07-25 10:27:16","Demo Admin"],
        ["15","3300-4100","Loss On Sale Of Fixed Assets","Income Statement","Expenditure","","","2013-07-25 10:27:08","Demo Admin"],
        ["21","3300-5500","Rental - Premises","Income Statement","Expenditure","","","2013-07-25 10:27:53","Demo Admin"],
        ["20","3300-6800","Transport And Freight","Income Statement","Expenditure","","","2013-07-25 10:27:47","Demo Admin"],
        ["22","6500-5100","Goodwill - Impairment","Balance Sheet","Non-Current Assets","Goodwill","","2013-07-25 10:28:00","Demo Admin"],
        ["17","7400-0100","Interbank Transfer","Balance Sheet","Current Assets","Cash And Cash Equivalents","","2013-07-25 10:27:22","Demo Admin"],
        ["18","7400-0200","Bank Balance 001","Balance Sheet","Current Assets","Cash And Cash Equivalents","","2013-07-25 10:27:29","Demo Admin"],
        ["19","9800-0100","Taxation - Normal","Balance Sheet","Current Liabilities","Taxation","","2013-07-25 10:27:40","Demo Admin"]
    ];
    $( "#account" ).autocomplete({
        source: availableTags
    });
});

我的文件中的 Ajax：

$( "#account" ).autocomplete({
    source: 'search.php'
});

我认为我的输出不正确...

如果您有任何答案或建议，我将不胜感激！

更新：

使用mysql_fetch_accoc的新输出

[{"id":"23","accountNumber":"1500-0900","accountDescription":"Profit On Sale Of Fixed Assets","accountLevel1":"Income Statement","accountLevel2":"Other Income","accountLevel3":"","accountLevel4":"","createdDate":"2013-07-26 10:22:07","createdUser":"Demo Admin"},{"id":"13","accountNumber":"1500-0920","accountDescription":"Profit On Sale Of Fixed Assets","accountLevel1":"Income Statement","accountLevel2":"Other Income","accountLevel3":"","accountLevel4":"","createdDate":"2013-07-23 13:42:45","createdUser":"Demo Admin"},{"id":"14","accountNumber":"3100-1200","accountDescription":"Other Assets 002 - Owned - Depreciation","accountLevel1":"Income Statement","accountLevel2":"Expenditure","accountLevel3":"Depreciation","accountLevel4":"","createdDate":"2013-07-23 13:47:06","createdUser":"Demo Admin"},{"id":"12","accountNumber":"3200-1120","accountDescription":"Other Assets 001 - Leased - Depreciation","accountLevel1":"Income Statement 3","accountLevel2":"Expenditure","accountLevel3":"Depreciation","accountLevel4":"","createdDate":"2013-07-23 13:48:42","createdUser":"Demo Admin"},{"id":"16","accountNumber":"3300-0800","accountDescription":"Bank Charges","accountLevel1":"Income Statement","accountLevel2":"Expenditure","accountLevel3":"","accountLevel4":"","createdDate":"2013-07-25 10:27:16","createdUser":"Demo Admin"},{"id":"15","accountNumber":"3300-4100","accountDescription":"Loss On Sale Of Fixed Assets","accountLevel1":"Income Statement","accountLevel2":"Expenditure","accountLevel3":"","accountLevel4":"","createdDate":"2013-07-25 10:27:08","createdUser":"Demo Admin"},{"id":"21","accountNumber":"3300-5500","accountDescription":"Rental - Premises","accountLevel1":"Income Statement","accountLevel2":"Expenditure","accountLevel3":"","accountLevel4":"","createdDate":"2013-07-25 10:27:53","createdUser":"Demo Admin"},{"id":"20","accountNumber":"3300-6800","accountDescription":"Transport And Freight","accountLevel1":"Income Statement","accountLevel2":"Expenditure","accountLevel3":"","accountLevel4":"","createdDate":"2013-07-25 10:27:47","createdUser":"Demo Admin"},{"id":"22","accountNumber":"6500-5100","accountDescription":"Goodwill - Impairment","accountLevel1":"Balance Sheet","accountLevel2":"Non-Current Assets","accountLevel3":"Goodwill","accountLevel4":"","createdDate":"2013-07-25 10:28:00","createdUser":"Demo Admin"},{"id":"17","accountNumber":"7400-0100","accountDescription":"Interbank Transfer","accountLevel1":"Balance Sheet","accountLevel2":"Current Assets","accountLevel3":"Cash And Cash Equivalents","accountLevel4":"","createdDate":"2013-07-25 10:27:22","createdUser":"Demo Admin"},{"id":"18","accountNumber":"7400-0200","accountDescription":"Bank Balance 001","accountLevel1":"Balance Sheet","accountLevel2":"Current Assets","accountLevel3":"Cash And Cash Equivalents","accountLevel4":"","createdDate":"2013-07-25 10:27:29","createdUser":"Demo Admin"},{"id":"19","accountNumber":"9800-0100","accountDescription":"Taxation - Normal","accountLevel1":"Balance Sheet","accountLevel2":"Current Liabilities","accountLevel3":"Taxation","accountLevel4":"","createdDate":"2013-07-25 10:27:40","createdUser":"Demo Admin"}]

编辑：

[{"id":"23","accountNumber":"1500-0900","accountDescription":"Profit On Sale Of Fixed Assets","accountLevel1":"Income Statement","accountLevel2":"Other Income","accountLevel3":"","accountLevel4":"","createdDate":"2013-07-26 10:22:07","createdUser":"Demo Admin","label":"1500-0900","value":"23"}]

【问题讨论】：

我可以让您将 $array = mysql_fetch_row($result); 更改为 $array = mysql_fetch_assoc($result); 并告诉我生成的 availableTags 是什么样的吗？谢谢！
@DevlshOne 我改了，json更好看！请看我的更新！请让我知道我可以对自动完成标签和值做些什么来获取它们？
好多了！现在让我告诉你如何使用它......
施展你的魔法@DevlshOne
好的，再做一个更改..请将"SELECT * FROM $tableName ORDER BY id` DESC LIMIT 1 "` 更改为："SELECT *, accountNumber AS label, id AS value FROM $tableName ORDER BY id DESC LIMIT 1 "

标签： php jquery html ajax autocomplete

【解决方案1】：

你可以看这两种方式：

a) 您的输出需要经过处理，以便查找自动完成脚本需要显示的内容；或 b) 您可以在自动完成选项顶部修改来自search.php 脚本的响应，使其工作。

不管怎样，search.php的回复需要是关联数组，所以请将mysql_fetch_row改为mysql_fetch_assoc。我们将使用第一种方式 {a} 并让它变得很棒！

现在，让我们看看自动完成脚本需要什么才能工作。您正在返回似乎是一个对象数组：

var AvailableTags = 
{"id":"23","accountNumber":"1500-0900","accountDescription":"Profit On Sale Of Fixed Assets","accountLevel1":"Income Statement","accountLevel2":"Other Income","accountLevel3":"","accountLevel4":"","createdDate":"2013-07-26 10:22:07","createdUser":"Demo Admin"}
{"id":"13","accountNumber":"1500-0920","accountDescription":"Profit On Sale Of Fixed Assets","accountLevel1":"Income Statement","accountLevel2":"Other Income","accountLevel3":"","accountLevel4":"","createdDate":"2013-07-23 13:42:45","createdUser":"Demo Admin"}
{"id":"14","accountNumber":"3100-1200","accountDescription":"Other Assets 002 - Owned - Depreciation","accountLevel1":"Income Statement","accountLevel2":"Expenditure","accountLevel3":"Depreciation","accountLevel4":"","createdDate":"2013-07-23 13:47:06","createdUser":"Demo Admin"}
{"id":"12","accountNumber":"3200-1120","accountDescription":"Other Assets 001 - Leased - Depreciation","accountLevel1":"Income Statement 3","accountLevel2":"Expenditure","accountLevel3":"Depreciation","accountLevel4":"","createdDate":"2013-07-23 13:48:42","createdUser":"Demo Admin"}
{"id":"16","accountNumber":"3300-0800","accountDescription":"Bank Charges","accountLevel1":"Income Statement","accountLevel2":"Expenditure","accountLevel3":"","accountLevel4":"","createdDate":"2013-07-25 10:27:16","createdUser":"Demo Admin"}
{"id":"15","accountNumber":"3300-4100","accountDescription":"Loss On Sale Of Fixed Assets","accountLevel1":"Income Statement","accountLevel2":"Expenditure","accountLevel3":"","accountLevel4":"","createdDate":"2013-07-25 10:27:08","createdUser":"Demo Admin"}
...
{"id":"19","accountNumber":"9800-0100","accountDescription":"Taxation - Normal","accountLevel1":"Balance Sheet","accountLevel2":"Current Liabilities","accountLevel3":"Taxation","accountLevel4":"","createdDate":"2013-07-25 10:27:40","createdUser":"Demo Admin"}]

不幸的是，这些对象缺少两个关键标识符来告诉自动完成脚本如何正确使用它们。 item 和 value 键。这些键告诉自动完成您的响应的哪些部分显示在输入框中，以及将哪些部分用作该选择的值。例如，在您的示例（如下）中，我们将需要为您的返回对象的两个元素分配一个 item 键和一个 value 键 - 每个元素都有一对返回数组中的对象。

$( "#account" ).autocomplete({
    source: 'search.php'
})

jsFiddle DEMO（快到了！）

【讨论】：

啊，我明白了，json 输出添加了label 和value.. 所以自动完成可以找到它？
我得到了它的工作jsfiddle.net/JbPpM/5 最后选择你给我添加label 和value。谢谢，会接受你的回答:)
太棒了！干得好！
谢谢@DevlshOne，但我能问点什么吗.. 是否可以将两个数据库列作为label，所以它可以是这样的SELECT *, accountNumber AND accountDescription AS label, accountNumber AS value FROM $tableName ORDER BY id ASC 我试过了，但它不起作用..
您的意思是可以通过 accountNumber 或 accountDescription 进行搜索？仅当您使用实际搜索 term 选项时... "SELECT *, accountNumber AS label, id AS value WHERE accountNumber like '" 。 $期限。 "%' OR accountDescription like '" 。 $期限。 "%'