jquery - jQuery UI 自动完成有问题

Question

我正在尝试使用新的 autocomplete function在 jQuery UI 中，但我遇到了一些问题。

我能够从数据库检索数据(我可以在 FireBug 中看到它)，但无法显示下拉列表(或提醒数据)。

这是我的 jQuery 代码:

  jQuery('#brand_search').autocomplete({
            source: "http://mysite.com/wp-content/themes/storelocator/include/jquery.search.php?instance=brand",
            minLength: 2,
            delay: 50,
            select: function(e, ui) {
              alert(ui);
            }
        });

这是我的 PHP 代码:

/* ------------------ Brand Autosuggest ------------------------- */
  function autosuggestBrand($dal)
  { 
    $result = $dal->getRowBySearch('sl_label','name', $this->term);   
    $brands = array();

    if(mysql_num_rows($result)>0) 
    {
      while($row = mysql_fetch_assoc($result)) 
      {
          array_push($brands, array(
            "id"      => $row['id'], 
            "name"    => html_entity_decode($row['name'], ENT_QUOTES, 'UTF-8') )
        );
      }     
    }
    echo json_encode($brands);          
  }

我看过这两个指南:
http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget

但仍然不太清楚如何显示/提醒获取的数据。

这是 echo json_encode 的结果

[
  {"id":"4642","name":"Mo Koshji"},
  {"id":"4627","name":"MO-A"},
  {"id":"4626","name":"MO'CYCLE"},
  {"id":"4628","name":"mo851"},
  {"id":"4629","name":"Mob Action"}
]

Answer 1

使用以下内容更正您的 php 数组，以便为​​ jquery-autocomplete 获得正确的 json 输出:

array_push
(
   $brands,
   array
   (
      "label"  => $row['id'], 
      "value"  => html_entity_decode($row['name'], ENT_QUOTES, 'UTF-8') )
    );
);

因为 jquery 自动完成需要这些 json 属性名称来运行文档中指定的自动完成:

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu.

http://jqueryui.com/demos/autocomplete/#custom-data