jQuery autosuggest數組樣式

我在我的一個搜索表單中使用簡單的jQuery autosuggest，但是我不太確定如何讓這更容易風格化。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();

Bes IDE的此位，這裏收集的數據是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 
}); 
});

來源

2012-08-05 Sjaak piraat

只需擴展'_renderItem'並在'spans'中單獨包裝名稱，年齡和狀態;你可以將它們設置爲'display：inline-block; width：100px;' – 2012-08-05 11:31:15

任何關於如何完全做到這一點的線索？我真的不是那種全新的javascript嗎？任何地方的例子？像我只是添加ul，項目，跨度，我可以使用跨度？ – 2012-08-05 11:38:13

那麼，我認爲你沒有寫上面的代碼^^？ – 2012-08-05 11:38:53

您可以使用自動完成的renderItem功能自動完成教程jQuery的網站上這個網頁上所描述的：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-27 13:06:16

jQuery autosuggest數組樣式

回答

相關問題