|
 人天性是懒惰的，网站浏览者也是一样，很多时候，浏览者在输入单词时候，都希望能有自动提示功能，如果表单能自动完成，是能够提高不少的用户体验。Drupal 7能够很方便的创建自动完成的textfield，下面讲解如何做：
让我们想象一下，你正在构建一些表单，你想帮助用户自动完成。例如，这个可以是一个“城市”的输入文本框。你可以有类似下面的形式： 1$ l0 V, j$ p' t
2& _5 G: \% K. G6 X; c- n
3
+ j) }/ Y) _0 P B4
5 H5 t% q4 T: |$ T* `5/ l; W+ ^3 f0 h
6
% O" Q' s, A( w% c8 n! p7; I$ l9 {& [3 u! z; d
8
, [/ h/ r. Q. I% u5 K/ q3 m9
9 {$ N& [; m1 J* {& r% \' y% i+ U10
6 t6 s9 D: c$ r0 U) y! \11
0 D, g( u2 s* w+ w9 v7 l4 k2 K125 Z. i! X5 S" a0 p9 ?7 a& E
13) ~( r" Y0 h& S. M
| function module_name_form() {
; C0 b5 U+ g) k# X5 |: p $form = array(); 0 m% ^ D5 `! u$ L/ `6 f7 g6 v
$form['city'] = array(
! g4 _/ {8 z+ _- A0 W '#title' => t('City'),) o7 y: m T3 C4 r9 v
'#type' => 'textfield',
- w" k6 s" ?" K0 @$ T '#autocomplete_path' => 'example/autocomplete', //留意这行。下面将做讲解。( |! x: M1 _3 f, d$ N* C& A
);+ E4 @# k1 {5 T$ E$ s4 V' _: n/ i
$form['submit'] = array(* r7 Z7 f% Z. b: ]
'#type' => 'submit',- F0 ]( U9 [2 c7 \
'#value' => 'Save',
" p2 I0 i1 z6 T& a1 L$ x ); 4 {$ D+ B9 e) H" o" H% \! E
return $form;; D& A; V: S; W" a! O
} |
上面代码，最关键的部分是：'#autocomplete_path' => 'example/autocomplete'，它定义了一个回调到textfield，当用户在文本框输入一些文本，drupal 将会发送一个请求到example/autocomplete 路径，同时通过Json回调结果回来，而example/autocomplete我们是可以用hook_menu 菜单系统实现： 19 T! ]9 M" S) u2 ^
2
J. Z; y0 q {# y. m `3
! N4 R) M* N: t' K% r2 A" `4
: d1 Z/ M. ` X( j' I8 T* M/ E5
y+ j6 e0 \+ [: |8 Z6
% E' x# b* v' j/ g& v73 [" T4 | ?0 s! Y
8& Q3 s* E1 B/ `- v7 k6 d
| function module_name_menu() {
& _7 P" _+ R2 i0 p5 V) {* f3 _6 P $items['example/autocomplete'] = array(3 L( U; t' H8 P5 o1 {6 p4 E( H" c+ Q. p+ P
'page callback' => '_module_name_autocomplete',//这个是函数 function _module_name_autocomplete($string)，下面将讲述。
% Q3 e% g- A& ~- P# ~ 'access arguments' => array('access example autocomplete'),
4 j% h) B6 P. p7 w& ^ 'type' => MENU_CALLBACK: e/ P4 A" s% |4 Y6 f w
);
/ G& b* t1 [! i. P. @& H- @ return $items;
( @) G; T& c `0 Y/ {} |
最后一步是创建函数 _module_name_autocomplete： 1
- N6 L( Q E2 p: t20 a k7 t. u$ f( b/ ?9 f O5 ^# U
3
. m5 _, D$ F$ a& u; l49 \ m% S, s5 x4 K+ f
55 ^& O, @6 w( {$ Q
6
8 A- P- N+ n* Y) C! W+ C7* U5 Y ~. P' i
8
3 e1 a: A* Z% `& ~9. E1 t* N- Q. K: r- ~
10: q+ n. O! C( d
110 o* V0 V% e' B) M* D. z
12% ^# R2 n4 u% @( f
13
9 g* c9 [4 V8 j4 w9 @* |144 m/ q) w# X, |9 c$ V
156 t9 B C$ {7 Q2 ^
165 t5 f' C; y/ E
17
: l8 K) G) z( { | function _module_name_autocomplete($string) {
8 c3 j* J# a% V $matches = array(); 0 w( d9 n! ~. F) n# F& d( \
// Some fantasy DB table which holds cities3 l+ l7 B3 J3 Z1 Q; M5 B$ ]7 V
$query = db_select('cities', 'c');
7 r. {% Z/ b4 t3 {" x& W // Select rows that match the string
8 X- t! K+ f8 _ $return = $query
6 j8 h, p* b) W5 c0 ^4 V' a( M ->fields('c', array('city'))1 s, |6 S* a7 q' P8 i4 a, }
->condition('c.city', '%' . db_like($string) . '%', 'LIKE')
( d: v2 ]& s, L& }2 A ->range(0, 10)
% q3 P2 ]1 Y4 v9 F/ } ->execute(); ) |# G* S0 T( y" b3 ^+ d
// add matches to $matches
) p% j% o3 h+ J# Y+ N' n. I' W foreach ($return as $row) {
: s2 ~, ]2 }0 f( l" r: |8 Y $matches[$row->city] = check_plain($row->city);, }/ e( z/ y! Y' o( O
}
' C0 b9 X1 C, Q2 B5 }2 d: u: V // return for JS
5 y7 [! V0 f: T1 F( | drupal_json_output($matches);
! V0 n% D' w! F7 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