UI自动完成格式化＆LT;立GT;在2号线的结果 [英] ui autocomplete formatting <li> results on 2 lines

问题描述

正在使用的用户界面自动完成从 http://jqueryui.com/demos/autocomplete/#remote
在search.php中使用PHP返回结果。

Am using ui autocomplete from http://jqueryui.com/demos/autocomplete/#remote Using PHP in search.php to return results.

我试图让我的自定义输出

Am trying to get my custom output of

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

这是从以下code到来：

This is coming from the following code:

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

这工作fantstically很好，但是为了更容易阅读的结果，我想，而对在2号线的结果在＆lt; LI>标记，以便其更多的是这样的：

This works fantstically well, however to make it easier to read results, I would like to rather have results on 2 lines within the < li > tags, so that its more like this:

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

我试过以下内容：

I've tried the following:

$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'];

所有的尝试导致在列表中无论是显​​示实际＆LT; BR＆GT; 标记或 \\ n ，而不是推到下一行。

All tries result in the list either showing the actual <br> tag or \n rather than pushing to the next line.

与萤火虫表演查看源姓名和放大器; LT; BR＆放大器; GT;公司

不知道这是因为发生的事情：

Not sure if this is happening because of the:

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

请注意，我的问题是有关获得HTML输出端产生在2线＆LT;李＆GT; 通过自动完成/ PHP / JSON标签..我不是问怎么加处Name..Hope我做感。

Please note, my question is related to getting the HTML output to produce 2 lines within a <li> tag via autocomplete/php/json .. I'm not asking about how to add Department Name..Hope I'm making sense..

TA

推荐答案

重写 _renderItem 方法：

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

这从文档演示做同样的事：<一href=\"http://jqueryui.com/demos/autocomplete/#custom-data\">http://jqueryui.com/demos/autocomplete/#custom-data

This demo from the documentation does the same thing: http://jqueryui.com/demos/autocomplete/#custom-data

在默认情况下， .append（item.label）是的.text（item.label）这是为什么你的＆LT; BR /＆GT; 被替换为＆放大器; LT; BR /＆放大器; GT;

By default, .append( item.label ) is .text( item.label ) which is why your <br /> gets replaced with <br />

这篇关于UI自动完成格式化＆LT;立GT;在2号线的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！