Question

使用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;
        }
    }

这非常有效，但是为了更容易阅读结果，我想在＆lt;＆lt;＆lt; li>标签，所以它更像是这样：

<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，而不是推送到下一行。

使用firebug查看源代码显示Name<br>Company

由于以下原因，不确定是否发生这种情况：

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

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

TA

Answer 1

覆盖_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 />被<br />取代的原因

Answer 2

如果遇到“未捕获的TypeError：无法设置属性'_renderItem'的”错误，您也可以尝试下面的代码。

$("#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 );
};

ui自动完成格式化<li>结果在2行</li>

2 个答案: