2

我正在使用来自http://jqueryui.com/demos/autocomplete/#remote的ui 自动完成功能 在 search.php 中使用 PHP 来返回结果。

我正在尝试获取我的自定义输出

<li>Company Name | Contact Name</li>

这来自以下代码：

if(is_array($rs) && count($rs) > 0){
        foreach ($rs as $item) {
            //format: "Name Surname=>cid_uid"
            $json = array();
            $json['id'] = $item['parentCompanyId'].'_'.$item['uid'];
            $json['label'] = $item['companyName'] . ' | ' . $item['name'] . ' ' . $item['surname'];
            $data[] = $json;
        }
    }

这工作得非常好，但是为了更容易阅读结果，我宁愿在 < li > 标记内的 2 行上显示结果，以便它更像这样：

<li>
Contact Name<br>
Company Name | Department Name
</li>

我尝试了以下方法：

$json['label'] = $item['name'] . ' ' . $item['surname'] . '\n' .$item['companyName'];

和

$json['label'] = $item['name'] . ' ' . $item['surname'] . '<br>' .$item['companyName'];

和

$json['label'] = $item['name'] . ' ' . $item['surname'] . '\\n' .$item['companyName'];

所有的尝试都会导致列表要么显示实际的<br>标签，要么\n不会推送到下一行。

使用萤火虫节目查看源代码Name&lt;br&gt;Company

不确定是否会发生这种情况，因为：

header("Content-type: application/json");
echo json_encode($data);

请注意，我的问题与<li>通过 autocomplete/php/json 在标签中生成 2 行的 HTML 输出有关。我不是在问如何添加部门名称 ..希望我有意义..

塔

4

2 回答 2

7

覆盖_renderItem方法：

$("#autocomplete").autocomplete()
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( item.label )
            .appendTo( ul );
    };

文档中的这个演示做同样的事情：http: //jqueryui.com/demos/autocomplete/#custom-data

默认情况下，这.append( item.label )就是.text( item.label )为什么你<br />被替换为&lt;br /&gt;

于 2012-06-07T14:53:36.100 回答
0

如果遇到“Uncaught TypeError: Cannot set property '_renderItem' of”错误，您也可以尝试以下代码。

$("#autocomplete").autocomplete()
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};
于 2020-07-14T07:53:02.600 回答