|
 人天性是懒惰的，网站浏览者也是一样，很多时候，浏览者在输入单词时候，都希望能有自动提示功能，如果表单能自动完成，是能够提高不少的用户体验。Drupal 7能够很方便的创建自动完成的textfield，下面讲解如何做：
让我们想象一下，你正在构建一些表单，你想帮助用户自动完成。例如，这个可以是一个“城市”的输入文本框。你可以有类似下面的形式： 1 r0 S O) }1 I4 O2 [8 f. S' N
2
2 W9 z J* p) C1 J$ m3+ d" L' L8 D5 V* u- [9 _! w
4
2 F5 G( [0 X& d+ t" O! Z" [55 Z9 {( x: L1 B7 z5 \
6
5 u- {& ?; A# D q f l7
* r/ w4 L$ H/ ~. \8 ^9 h8 O8
9 T) R) F& l( ?; N" M9
' F* d: [/ Y, d$ }6 q10
. m l& ~( B `6 w0 ?- x11 K/ W; ^' ~7 f1 f' o
12
& |! ?, d* L4 {) E- |& N13
! M3 w: n! D Z0 L5 d ]' b6 Q | function module_name_form() {
9 |. _8 Q4 E0 H. b, Y( r; R% W $form = array();
' o1 o1 E. \3 S: N- ` $form['city'] = array(
1 U* O; l/ a' k! M; p '#title' => t('City'),
! A) [: P3 {6 N0 p6 N '#type' => 'textfield',
& E( \6 N" z2 T$ D" v '#autocomplete_path' => 'example/autocomplete', //留意这行。下面将做讲解。/ r! _. n- `7 Z4 p, |; p
);
+ s- A {* ~% r, |" J9 S $form['submit'] = array(& c/ Y& ]; a1 [& I
'#type' => 'submit',0 W1 R5 Y# H. S" Q
'#value' => 'Save',
5 F$ L* c8 C2 @ ); 6 X) V& {- W+ G1 C. l# e
return $form;
8 ? V& V* ]% I} |
上面代码，最关键的部分是：'#autocomplete_path' => 'example/autocomplete'，它定义了一个回调到textfield，当用户在文本框输入一些文本，drupal 将会发送一个请求到example/autocomplete 路径，同时通过Json回调结果回来，而example/autocomplete我们是可以用hook_menu 菜单系统实现： 1/ Q$ f6 `' v9 J: a
2
1 M0 d' w5 L1 z2 [3
}; U' A9 I0 R; J8 N! O4
! X: N3 c( `/ K" K8 e$ K9 {, h5) ~& }) D. o- ^) d7 X
6) G- j5 j6 ~- Y* V! i
7
. l( Y! y% p& S+ @3 y/ ?, `) p8
) N) Q; J8 a6 R1 W( b/ p, m | function module_name_menu() { ; k, O$ Z2 d+ D' Q( \$ `, H c
$items['example/autocomplete'] = array(
d, L" c4 ^9 U R. G- X) C 'page callback' => '_module_name_autocomplete',//这个是函数 function _module_name_autocomplete($string)，下面将讲述。
- J ]0 c: M0 A, |3 R0 B 'access arguments' => array('access example autocomplete'),
[9 [0 ^- K% \- U 'type' => MENU_CALLBACK
/ F2 \4 B+ c1 Z# ~ );1 H8 U K9 }% o; ?7 q, V
return $items;
4 Y$ S4 b5 a- M. S5 S} |
最后一步是创建函数 _module_name_autocomplete： 1
: ^! z% G1 O a L2
) K% X, P; _0 K3. `) W+ }7 |7 v. q) f2 f$ z
4
: G: c& I2 f# h% u2 u4 M: x! e c5- z( X& H( u$ t
6$ _7 g- ^ P! G. S7 U+ L
7
# @$ E7 q( `0 B7 O7 u) m7 \) V. `8
1 n; @6 G$ M- e! s9$ u+ U1 [) B( K
10
6 X: @8 s; y' d$ f% Y( B4 c' ~+ g11
$ n0 {* ]; \! U' Z3 N% X12
' H. M9 n$ r) K$ U$ L134 m8 o2 A7 _5 @% M$ N! l
14
. I. F- F5 K4 s+ L1 t15" u: m3 Z; l) B$ w
16
: {% ]! T* T' d0 G8 k" g4 v: P17$ C' A+ ]- _$ v* H% l
| function _module_name_autocomplete($string) {
( W1 D* I( b, r" V# x* g9 p $matches = array(); 8 U+ N( w6 x2 h& g X6 d5 p
// Some fantasy DB table which holds cities3 }# w/ L$ `' F
$query = db_select('cities', 'c');
; `' k* ?/ q+ ~1 W; S4 r; j // Select rows that match the string
, O% j+ X; n- u $return = $query& i! z- ?, N, L) @# `4 y
->fields('c', array('city'))4 ]2 S1 l- \4 _ l. ~4 `
->condition('c.city', '%' . db_like($string) . '%', 'LIKE')
9 F; D I( v. K, \9 i ->range(0, 10)
- y6 a5 a, A1 W/ e: H1 V- ~ ->execute(); 0 u! A1 }- \! N2 {3 T: h
// add matches to $matches
) `/ V* d# W) W( E& z' Y | foreach ($return as $row) {6 M% a6 \4 i( n+ o5 V/ W
$matches[$row->city] = check_plain($row->city);
7 W N% T, p8 |. I5 f) t } " e/ z5 Q) T! E4 Y
// return for JS
7 c+ W. c# q* R% P drupal_json_output($matches);1 s# \# C1 s8 d7 L$ S! }& K
} |
这个函数我们通过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