|
 人天性是懒惰的，网站浏览者也是一样，很多时候，浏览者在输入单词时候，都希望能有自动提示功能，如果表单能自动完成，是能够提高不少的用户体验。Drupal 7能够很方便的创建自动完成的textfield，下面讲解如何做：
让我们想象一下，你正在构建一些表单，你想帮助用户自动完成。例如，这个可以是一个“城市”的输入文本框。你可以有类似下面的形式： 1
: ]5 B9 L- ^9 }* N7 j+ @2" o% W: J* F E, c* j
3. w# G* ~8 D+ U0 ^3 K9 ]- o
4' x3 V3 h' ~; n& t
5
5 W+ A: L+ b% w* s6- ?1 X9 Q3 R& \! Y: _
7
0 K5 j; u3 p+ L) d8
" f @( _- g5 ~' k( ~' {9
) G. S+ \ O% m$ `7 ~0 h8 E1 L10
" ~& y2 C4 m4 w. M11! @' `" s' }. `6 Y( _
12
) j' o8 `- Z/ O2 W5 _13( o0 G1 R- F. a+ y
| function module_name_form() {
. n6 q) S1 F' b- g- I2 p+ j* d1 ]5 a $form = array(); 9 T) }; q9 b% {, ?2 P
$form['city'] = array(* O( A6 ?) }% Z
'#title' => t('City'),1 A$ f0 T0 X) V8 F6 ]+ q. C" {3 P
'#type' => 'textfield',6 y+ a) f& ~& R0 M5 O
'#autocomplete_path' => 'example/autocomplete', //留意这行。下面将做讲解。; z! H% j( P9 U/ X
);, p4 A* F0 D3 }! n! p
$form['submit'] = array(
0 ]7 |: x, R1 R/ J '#type' => 'submit',5 A4 F- w# g4 A- o! c: K
'#value' => 'Save',4 T3 ~7 q) m! ^8 E
); 0 C% @3 ^0 B6 U7 x/ r3 G
return $form;; E6 n( m' K% U, B9 Y
} |
上面代码，最关键的部分是：'#autocomplete_path' => 'example/autocomplete'，它定义了一个回调到textfield，当用户在文本框输入一些文本，drupal 将会发送一个请求到example/autocomplete 路径，同时通过Json回调结果回来，而example/autocomplete我们是可以用hook_menu 菜单系统实现： 1
& Z2 a+ S, L" m& C, E2 d% B- K9 [2
0 f5 `4 E" Z( N! O3) Q* B' j4 N, \% R
4
& S X+ X2 }2 V' E, x5; X$ U8 m7 n& F# T2 Z7 j" \2 Z
62 h" t8 I+ e. R& r
7
1 ?8 V5 x) W$ D8- g5 d4 f( s$ x+ |( ~$ Y
| function module_name_menu() { 8 E# F0 m" w8 Y2 Z- S. X( @
$items['example/autocomplete'] = array(! ^& b8 ]4 s! k& i8 q& d- \' B
'page callback' => '_module_name_autocomplete',//这个是函数 function _module_name_autocomplete($string)，下面将讲述。8 |2 r* C7 K; C- h" v' f
'access arguments' => array('access example autocomplete'),3 ~ \1 g6 @4 L L& U. P
'type' => MENU_CALLBACK
7 j* X) Y2 P9 v. M$ F );" H, s& t+ r, m4 m
return $items;6 c& M, W- |& S
} |
最后一步是创建函数 _module_name_autocomplete： 11 K5 S- v, W; }9 t6 g, T
2
- N/ _- L6 k! s! F" ~6 a3
) f$ \. v. {2 N \1 Q8 d4 q: g4
2 r$ \3 y+ ^' i- p/ W2 K5
2 _/ ?6 O ^2 |8 T. B/ T J4 j6
# V( B5 t o( V; Q- b9 {% V' e7
+ T( ~6 @" Q9 I/ h- H' x8
- r Y; J0 @& A- K$ E+ ]1 Y2 j0 K! V96 w0 h. B, d% T$ O, P7 q, D0 D
104 ?1 d% S' f7 E/ f
11
( W, \2 j" c/ d/ L12
* E, V1 u) Z0 w* t# W4 x13
5 u4 @, ^6 d S6 G' l( M14
W" d1 j9 V; K3 I9 {3 Z$ C15
8 l* F) N* ~" A$ a' _16
' x7 m2 E/ K! O! Z6 g* {8 L" m17
6 u5 J% S/ B) u6 @ v | function _module_name_autocomplete($string) {- H4 F1 J6 f+ l$ X$ X [. q
$matches = array();
0 l3 U+ Z) ~7 o; ]$ K // Some fantasy DB table which holds cities
9 T) o+ C' j% A. }: [( v $query = db_select('cities', 'c');( J( S* _ D$ p. C
// Select rows that match the string
7 S+ l2 A2 q+ Z $return = $query
6 @% ~% W) D1 q/ ]8 a ->fields('c', array('city'))) [3 z0 T" t+ B! I% j% S
->condition('c.city', '%' . db_like($string) . '%', 'LIKE')6 g' d; s0 |0 d" a# x
->range(0, 10)
5 F* i, h) h0 z( n; {# D ->execute();
- x# f% y# R; j) n4 n+ [ // add matches to $matches
3 g; }7 z1 y0 K0 D0 n/ F3 x; M: K foreach ($return as $row) {7 Q0 Q8 I# Z2 q
$matches[$row->city] = check_plain($row->city);/ ~- N! U- F- A* H* N: N& ~
} l9 f5 ^2 v D, r' W
// return for JS
1 Z2 y$ a0 C5 W! y+ h$ k drupal_json_output($matches);3 t6 [" U2 _7 V% @
} |
这个函数我们通过db_select 读取数据库cities表的数据，从表数据中找到与用户输入相类似的条目。（如果不习惯db_select,也可以用回db_query，drupal 7同样支持）
如果你想要更多比较完整的例子，你可以去看看drupal 7的核心模块 taxonomy，里面有一个函数function taxonomy_autocomplete，大概在79行（‘modules/taxonomy/taxonomy.pages.inc’）。
猪跑啦网站的添加新问题页，http://www.drupalla.com/question/ask 是autocomplete， 还有也可以看看我的另外一个网站图标酷(http://www.openico.com)，那个搜索表单，也是autocomplete的。 现在，我猜想你应该能完成一个autocomplete 了，赶紧试一下吧，实践最关键。
猪跑啦独家原创专稿，欢迎您转载本文，转载请注明来源。 | 
发表于 8-10-2012 21:48