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网站上的自动完成教程中描述的自动完成的renderItem功能：http: //jqueryui.com/demos/autocomplete/#custom-data

但是，您必须对代码进行一些更改：

使用这种新结构更改您的响应 json

到以下：

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

接下来，您应该使用自动完成 _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 回答