|
 人天性是懒惰的，网站浏览者也是一样，很多时候，浏览者在输入单词时候，都希望能有自动提示功能，如果表单能自动完成，是能够提高不少的用户体验。Drupal 7能够很方便的创建自动完成的textfield，下面讲解如何做：
让我们想象一下，你正在构建一些表单，你想帮助用户自动完成。例如，这个可以是一个“城市”的输入文本框。你可以有类似下面的形式： 1& Q" L- A" W: i% d- X; z2 a
20 r8 G8 o5 U; f) W6 H4 u$ P
3
^6 c" A. S3 G d, ^0 F" G4
6 t0 k, v) S# k( j: e/ o- o) {5. |1 }; L6 d# A8 @' s+ K: ^
6
+ @) L; R- _- D; \; Z- N X" W& X73 t: N2 l+ H. y& t2 M# N
8
& u$ S* x& n+ i# {% D. [9
( W! w" Q6 ~$ ?& Q2 ^10! H, p( ~3 Y- Y) P7 E
114 V6 W* |* _ |( q" W4 N$ u
12
. p# A8 H/ k# X13
; ]4 d9 a) |1 `6 u | function module_name_form() {% b" A# m9 ?! {
$form = array();
' b. D9 ~, ]- [/ M; W $form['city'] = array(
; o- r& k6 m/ y' y$ ?4 v '#title' => t('City'),
( m% n* H8 B. p; a '#type' => 'textfield',
( E) K+ G! b% p$ q/ n '#autocomplete_path' => 'example/autocomplete', //留意这行。下面将做讲解。/ D1 T/ h" z% X3 }1 X2 \
);
0 G1 _2 b- X/ |2 T. u8 f $form['submit'] = array(. V" v7 q6 ]# d8 K3 j
'#type' => 'submit',
6 y7 G( |* s% u '#value' => 'Save',4 F- f0 x5 ~2 n) Q' m, Y; W& ^! K
); 8 x: n6 k0 _. \9 y- Z1 R6 J
return $form;* K. }1 F2 m4 M) Z7 y9 m9 c9 Q
} |
上面代码，最关键的部分是：'#autocomplete_path' => 'example/autocomplete'，它定义了一个回调到textfield，当用户在文本框输入一些文本，drupal 将会发送一个请求到example/autocomplete 路径，同时通过Json回调结果回来，而example/autocomplete我们是可以用hook_menu 菜单系统实现： 1
+ S6 n& `) K& j9 x: s6 s2
# P6 w9 A. A; P/ U, f3$ U! y8 p3 Z( `9 L ] k
4! t4 Q: `0 ~) z0 t% p) x9 R
5
: s( r& W+ z- u0 j! C3 o: M& t1 ]$ G6
3 e5 s/ \+ C# V4 F7 G+ v* a7 [! y0 l7
$ m+ }1 s- S9 k8$ E' Z+ B( r& z2 B
| function module_name_menu() { ! {& Z3 J) l, ?- [
$items['example/autocomplete'] = array(
( x# ~- @1 E2 `8 v6 D! b 'page callback' => '_module_name_autocomplete',//这个是函数 function _module_name_autocomplete($string)，下面将讲述。
) L5 v& a' x* \" Y( w 'access arguments' => array('access example autocomplete'),' d6 D2 s# \( ^ B4 e
'type' => MENU_CALLBACK
9 \% P8 U' G/ |; t7 y* } );$ R; C0 O, O. G h/ N5 [
return $items;
% c* z3 ] ?, G2 v9 o/ C. h# q. h} |
最后一步是创建函数 _module_name_autocomplete： 11 Q: K; p7 d8 K) }# H7 V' N% _
2$ c; V% \% Q9 B4 D6 x% t. a. p5 o
3
6 n8 s6 u* R# `2 ~0 M4( ?% R% H0 T+ P" u, `- [ x
59 f1 R2 H, @& v
6 ?9 t$ M: @) R/ `
7
* R* ?1 W4 r3 Q( K% V6 I7 ?( R82 x- q$ S; a, F
9
# s7 ?# O0 g M! d6 |10
+ Z9 b& k& x9 p2 y' d117 ^/ X5 W. y0 y; e/ Q
12
l8 ]3 m d0 C( l# ~+ T138 I% t, O, J& s8 R/ C1 S
14
& C$ i6 g! ?" q- m) d% ]1 u15 u( H! V9 F' e6 Z" Z
16
( I- S! ~! _& }; n174 l- o; T2 x2 g- K+ `, ^
| function _module_name_autocomplete($string) {5 z. e) F! d1 z6 {( K
$matches = array(); Z; P+ l, }: R) w) I
// Some fantasy DB table which holds cities6 N4 a6 M6 H, @* _6 u+ J# U
$query = db_select('cities', 'c');, u- X$ q/ A/ t& p
// Select rows that match the string/ ~) S% |0 T/ I6 U. k
$return = $query
2 l( S, H# R' R" l ->fields('c', array('city'))7 c/ K& e5 _# {+ l0 J
->condition('c.city', '%' . db_like($string) . '%', 'LIKE')
) A' Y/ m6 ]) y" m: y' z) Q6 f ->range(0, 10)
, r& a( m4 k2 ^: X ->execute();
7 w% C" M% D8 ]0 ?, D- D7 b1 T // add matches to $matches
; D R# _0 B7 |8 `. y" ^; a; k% d: h foreach ($return as $row) {
8 T0 S- W4 {: t# V $matches[$row->city] = check_plain($row->city);. _( i, X' G3 z: ~
} , g; Z+ ]# P1 B4 F; r( d) g7 S
// return for JS |, \6 R* x1 e3 l( a
drupal_json_output($matches);2 B0 B' {' x4 ^4 X) L; f& _- i
} |
这个函数我们通过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