1

私が試したことを含むコードスニペットでこれをもう一度聞いてみましょう

各データソースの見出しを含め、用語を強調するように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;
}`

残念ながら、フォーマットされた出力が得られません。代わりに、実際には<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（Codeigniter）：

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 に答える