Question

让我再尝试使用我尝试过的代码片段再次询问这个

我正在尝试格式化Jquery自动完成，以包含每个数据源的标题并突出显示该术语。我正在使用Codeigniter，并认为最简单的方法是在发送之前对其进行格式化：

JS：

$( ".auto-search" ).autocomplete({
        source: '/json/autocomplete_search',
        minLength: 2,

    });

PHP（Codeigniter）

public function autocomplete_search()
{
    $term = $this->input->get('term');

    //load model and get results
    $this->load->model("mymodel");
    $results1= $this->mymodel->search_one($term);
    $results2= $this->mymodel->search_two($term);

    //Start JSON string
    $json='[';

    //first source
    if ($result1->num_rows() > 0)
    {
        $json .= '{"value":"<h3>Heading One<h3>"}';
        foreach ($results1->result_array() as $r1)
        {
            $result = str_replace($term,"<strong>".$term."</strong>",$r1['title']);
            $json .= ',{"value":"'.$result.'"}';
        }
    }

    //second source
    if ($result2->num_rows() > 0)
    {
        if ($result1->num_rows() > 0){$json .=  ',';}
        $json .= '{"value":"<h3>Heading Two<h3>"}';

        foreach ($results2->result_array() as $r2)
        {
            $result = str_replace($term,"<strong>".$term."</strong>",$r2['location']);
            $json .= ',{"value":"'.$result.'"}';
        }
    }

    //Close JSON string
    $json .= ']';
    echo  $json;
}`

不幸的是，我没有得到格式化的输出，相反，它实际上添加了单词＆lt; H1＆GT;和＆lt;强＆GT;到输出。以下是示例输出：

enter image description here

Answer 1

好的，所以我找到了办法。我是这样做的：

<强>使用Javascript：

    $( ".auto-search" ).autocomplete({
        source: '/hotpepper/json/autocomplete_search2',
        minLength: 2,
        open: function(event, ui) {
            $(".ui-autocomplete .ui-menu-item a").each(function (i) {
                var row = $(this).html();
                row=row.replace(/&lt;/g,"<");
                row=row.replace(/&gt;/g,">");
                $(this).html(row);
              });   
        },

    });

PHP（笨）：

public function autocomplete_search2()
{
    $term = $this->input->get('term');

    //load model and get results
    $this->load->model("establishment_model");
    $results1= $this->establishment_model->search_autocomplete_est($term);
    $results2= $this->establishment_model->search_autocomplete_loc($term);

    //Start JSON string
    $json='[';

    //first source
    if ($results1->num_rows() > 0)
    {
        $header= "<h3 style='font-weight:bold'>Accommodation:</h3>";
        $json .= '{"value":"'.$header.'"}';
        foreach ($results1->result_array() as $r1)
        {
            $result = str_replace($term,"<strong style='color:#C00'>".$term."</strong>",$r1['establishment_name']);
            $json .= ',{"value":"'.$result.'"}'; 
        }
    }

    //second source
    if ($results2->num_rows() > 0)
    {
        if ($results1->num_rows() > 0){$json .=  ',';}
        $header= "<h3 style='font-weight:bold'>Destinations:</h3>";
        $json .= '{"value":"'.$header.'"}';

        foreach ($results2->result_array() as $r2)
        {
            $result = str_replace($term,"<strong style='color:#C00'>".$term."</strong>",$r2['establishment_location']);
            $json .= ',{"value":"'.$result.'"}';
        }
    }

    //Close JSON string
    $json .= ']';
    echo  $json;
}

由于自动完成会转发我发送的html，因此我只需将<和>替换为＆lt;＆gt;即可。当我打开自动完成框时。

编辑：还必须添加以下事件来格式化结果：

close: function(event, ui) {
                var result = $(this).val();
                if (result.search("</h3>") ==-1)
                {
                    result=result.replace(/<strong style='color:#C00'>/g,"");
                    result=result.replace(/<\/strong>/g,"");
                }
            else
            {
                result="";
            }
            $(this).val(result);
        }

自动填充：格式化结果

1 个答案: