1

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

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

JS：

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

    });


PHP（代码点火器）

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

不幸的是，我没有得到格式化的输出，相反，它实际上在输出中添加了 <h1> 和 <strong> 这两个词。这是示例输出：

在此处输入图像描述

4

1 回答 1

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);
        }
于 2012-08-30T23:24:24.223 回答