1

検索フォームの 1 つで単純な jQuery autosuggest を使用していますが、これを簡単にスタイル設定する方法がよくわかりません。

現時点で何が起こっているかというと、次のような結果が表示されます。

**name** **(age)** - **state**
John (66) - here
Jack (36) - there
Jason (46) - here
Jimmy (56) - there

ただし、次のような事前定義された幅で、ある種のテーブルを作成したいと考えています。

**name**    **(age)**    - **state**
John     (66)     - here
Jack     (36)     - there
Jason    (46)     - here
Jimmy    (56)     - there

現在、データを収集する配列は次のようになります。

$data = array();
if ( $rs && mysql_num_rows($rs) )
{
while( $row = mysql_fetch_array($rs, MYSQL_ASSOC) )
{
    $data[] = array(
        'label' => $row['name'] .'('. $row['age'] .') - '. $state,
        'value' => $row['name']
    );
}
}
echo json_encode($data);
flush();

ここでデータを収集するこのビットに加えて、javascript があります。

jQuery(document).ready(function($)
{
$.widget('custom.custom_autocomplete', $.ui.autocomplete,
{
    _renderMenu: function(ul, items)
    {
        var self = this;
        $.each(items, function(index, item)
        {
            var li = self._renderItem(ul, item);
        });

        $(ul).addClass('sis');
    }
});

$('#sis').custom_autocomplete({
    minLength:1 ,
    source:'autocomplete.php' ,
    selectFirst:true
});
});
4

1 に答える 1

0

このページの jQuery Web サイトのオートコンプリート チュートリアルで説明されているように、オートコンプリートの renderItem 関数を使用できます: http://jqueryui.com/demos/autocomplete/#custom-data

ただし、コードにいくつかの変更を加える必要があります。

この新しい構造でレスポンス json を変更する

以下に：

$data[] = array(
'name' => $row['name'],
'row' =>  $row['age'],
'state' => $state,
'value' => $row['name']
);

次に、autocomplete _renderItem() 関数を使用して Javascript コードを変更する必要があります。

このようになります

$( "#sis" ).autocomplete({
            minLength: 0,
            source: autocomplete.php,
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<p><span class='width100'>" + item.name + "</span><span class='width100'>(" + item.age+ ")</span><span class='width100'>-" + item.state+ "</span></p>")
                .appendTo( ul );
        };

最後に、CSS ファイルに次の CSS コードを追加して、幅をサポートします。

p.width100{
    width: 100px;
    padding: 5px 0;
    text-align: center; 
}

最終的には、望ましい結果が得られるはずです。必要に応じて CSS を編集できます。

于 2012-09-27T13:06:16.910 に答える