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

Question

我在http://jqueryui.com/demos/autocomplete/#remote中 使用ui autocomplete 在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不是推送到下一行.

用firebug节目查看源代码 Name<br>Company

不确定是否发生这种情况是因为:

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

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

钽

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 />