|
 人天性是懒惰的，网站浏览者也是一样，很多时候，浏览者在输入单词时候，都希望能有自动提示功能，如果表单能自动完成，是能够提高不少的用户体验。Drupal 7能够很方便的创建自动完成的textfield，下面讲解如何做：
让我们想象一下，你正在构建一些表单，你想帮助用户自动完成。例如，这个可以是一个“城市”的输入文本框。你可以有类似下面的形式： 1
! p7 D ^' R8 N: A2 O" s2
( e- ~1 T$ s9 f1 a" P+ N, q3
, R% R3 j- v" d! [) P2 |- X43 u8 M2 d7 e( [; W
5 l8 n' N* K/ J0 E* n
6
I8 A6 G6 D! [6 T: V, Y* U7, T6 ?1 p" _0 t
82 Q# ?. p' d6 i6 q3 `4 A
9
. u( V3 O7 M2 N; l4 }10
6 Y8 W4 `9 ]" a114 j1 E% P) {: ]1 V' }5 L. d
12
3 Q+ q# N% G0 | [" H13, i, m) I+ H# e: V
| function module_name_form() {
1 G ^) {% S$ V a: B% _ $form = array();
1 ]7 C8 Z3 ~/ M4 Y$ X1 z! g6 }4 D) q $form['city'] = array(4 \' a% Y1 w$ p
'#title' => t('City'),
" L6 s: K- d% s$ T( n '#type' => 'textfield',: q: D8 B6 G u
'#autocomplete_path' => 'example/autocomplete', //留意这行。下面将做讲解。8 r" w* \, a, }# I) j1 F5 h
);' E" e7 Q( @, y* X, x
$form['submit'] = array(
* {3 ?0 j% k6 l( m '#type' => 'submit',2 x. ^1 T( N5 l+ ]- \( A
'#value' => 'Save',
* D/ {$ [$ ?- h ); " j! [. h7 h$ u! `- M
return $form;
" E( ]' H: S/ I; `/ R7 Y} |
上面代码，最关键的部分是：'#autocomplete_path' => 'example/autocomplete'，它定义了一个回调到textfield，当用户在文本框输入一些文本，drupal 将会发送一个请求到example/autocomplete 路径，同时通过Json回调结果回来，而example/autocomplete我们是可以用hook_menu 菜单系统实现： 1, y- |; |- ~" T9 U
2
5 I0 p z' D' z2 \) J* F3
0 }! A9 H2 V+ t44 R8 d# a- p# t3 I" d' J4 Y
5; ~: R: E& N$ j( p q
6; o: S5 _3 w( y* z% R
7. f0 }. y. b, Y
8& j8 e$ @$ X# m5 V
| function module_name_menu() {
; F0 K$ ~6 t0 `' b+ X, O0 x $items['example/autocomplete'] = array(
& f! I1 Q' ^: w/ }) I# A! e 'page callback' => '_module_name_autocomplete',//这个是函数 function _module_name_autocomplete($string)，下面将讲述。. O4 a( _- g' q' \
'access arguments' => array('access example autocomplete'), h! F; x9 d& y
'type' => MENU_CALLBACK
, T* a! J4 F% \$ H; q3 z) d );
+ _6 s+ s! _- a: g return $items;
7 t) f; d( K9 g} |
最后一步是创建函数 _module_name_autocomplete： 1
7 x4 F: R2 @" L. ^$ J. K- n+ c, W29 e: z/ l5 G9 A# Y( _
3
/ J* I' V' T. {' }2 `4
1 o# D- e/ S* p. ], q; S& L5 t( v8 X: i$ \0 k2 | |' {8 [2 v% Q
6
* W8 P$ `$ J/ k7( j6 d/ J: c2 n" Q- ?: i8 \0 E
8
! [. e- f+ Q$ a1 I# t7 N9' r v8 Y2 K0 v6 N# z
10/ y+ s& t5 z3 Z# b( O, ~! o4 I
11
6 U6 O6 M) r: H$ e9 F12
% ]% u, Y! x5 U4 n' t$ V13! M% S# h. _3 I, W. ^/ v
143 r7 r. G1 }$ g1 g
15# X4 |* }. j* ^4 n7 ?9 R. @
16+ G. A. u0 o' t
17
, L' t$ |6 }5 _ | function _module_name_autocomplete($string) {
d* u7 [4 N+ w6 n $matches = array();
3 p; t! q( U3 X4 d5 t // Some fantasy DB table which holds cities9 L% f- d4 ^8 ^# @3 V
$query = db_select('cities', 'c');
7 J1 t4 E) }7 K- s% [ // Select rows that match the string
4 d9 g; a% U* }" x $return = $query2 ~) R: F( d6 F1 R% k
->fields('c', array('city'))$ E9 `6 X4 D- j- \- F: n5 m
->condition('c.city', '%' . db_like($string) . '%', 'LIKE')6 S, k- B7 h4 `2 V
->range(0, 10); F( G- l: Y& G% I. M3 e
->execute(); 7 @2 k. e6 Y; @! S: D2 M
// add matches to $matches
5 L+ J' Q) z' G3 a* f foreach ($return as $row) {! A2 t6 Y8 ?' |; k" a
$matches[$row->city] = check_plain($row->city);* _8 F" g$ M" K
} * o8 T" S. s9 h+ ~: }
// return for JS
l; L$ q f, f8 _( S& @ drupal_json_output($matches);* k+ C1 Z# l3 i! g% A$ m
} |
这个函数我们通过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