Question

我在我的一个搜索表单中使用了简单的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
});
});

Answer 1

您可以使用此页面上jQuery网站上的自动完成教程中所述的自动完成的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。

jQuery autosuggest数组样式

1 个答案: