Drupal 7 如何做自动完成输入框(Ajax Autocomplete) - 国外设计欣赏网站 - DOOOOR.com

人天性是懒惰的，网站浏览者也是一样，很多时候，浏览者在输入单词时候，都希望能有自动提示功能，如果表单能自动完成，是能够提高不少的用户体验。Drupal 7能够很方便的创建自动完成的textfield，下面讲解如何做：

让我们想象一下，你正在构建一些表单，你想帮助用户自动完成。例如，这个可以是一个“城市”的输入文本框。你可以有类似下面的形式：

1' N: W. f/ ~' y' y
2
1 Y5 b6 P1 L" @3
: s, Q% S' o; Y' v7 {! K! w4* \% ]& u" ?4 a  g
5
, S7 V& ]% M5 j3 ?6
' z: S* L5 w$ ~$ l, l2 u7
. N% n# y# f9 t: O# c6 c" }$ H; c  P/ W8
4 p& O/ k$ i7 p$ @4 ]0 f7 H9
0 I3 D4 P1 B: y1 u0 I10  I: G+ y) x) G1 @& A' ]
11# m: }$ W3 Q) K" B' D; n
12+ a+ D( O7 ^1 U
13
( ^5 Q0 s/ Y0 [6 ]+ n/ `+ g

function module_name_form() {; l2 [3 N7 W! j% I; V; b
  $form = array(); 
. R; E0 s5 M8 V% X8 `( V5 r; {  $form['city'] = array(
- n2 d. m+ y5 U( N- @$ S    '#title' => t('City'),
6 v! J# R2 g  O7 }2 W7 R    '#type' => 'textfield',. g! V) I$ i" g0 `& Z
    '#autocomplete_path' => 'example/autocomplete', //留意这行。下面将做讲解。
+ z4 ~1 I) v& u4 G3 L2 K4 S. e   );0 [) c0 l# K2 ^; Z5 L8 V% g
  $form['submit'] = array(
& }3 h, `! L- K, e' s" U+ I7 T    '#type' => 'submit',! U; _5 g7 N5 q7 c8 `' S
    '#value' => 'Save',
0 O* \- w1 e3 p! D- [* p& I! ]  );   y. U( b' y8 H9 U
  return $form;& `5 a: F# M5 ~
}

上面代码，最关键的部分是：'#autocomplete_path' => 'example/autocomplete'，它定义了一个回调到textfield，当用户在文本框输入一些文本，drupal 将会发送一个请求到example/autocomplete 路径，同时通过Json回调结果回来，而example/autocomplete我们是可以用hook_menu 菜单系统实现：

1
6 E% [* M2 ~. ]2 f6 {" q5 Y2- W. L, i4 _1 y: p
3& G# T7 d) `) i& F- P
4
: M. ~7 ~& ]- Y4 F( g+ E1 a5! q4 M! k4 f7 L4 ]  l" v9 m- |) A
6  g4 w- \7 ^# v4 f. C, x
7* B' S( F0 {3 ^( j& J5 e, x4 [
88 j( H! V8 Z' `- N1 F1 k# L

function module_name_menu() { 
2 v- o8 U/ Q# P( ^- Z) k, g  $items['example/autocomplete'] = array(
9 V" Z" F  p0 |% z+ k* v. i+ I2 @- E    'page callback' => '_module_name_autocomplete',//这个是函数 function _module_name_autocomplete($string)，下面将讲述。* o; g: U! E9 `1 k( ~) n; R
    'access arguments' => array('access example autocomplete'),
  ]7 e# F! @) q) t    'type' => MENU_CALLBACK6 \# G2 C/ c0 ~$ [# {! q
  );
% n& s" H8 \, U1 q2 {: o  return $items;
' c0 F/ a' A7 V5 ]  k' H7 ~}

1" Q" M* X8 Z% e% H1 B- S' q
2$ j) z3 Z4 a% p. l- ~8 g9 K0 Y
3  m  J9 v6 Z9 L) A
4
7 L6 r8 k( b# `% y9 C7 V! N5
( F7 h7 m: r2 f& w" F1 B8 C8 Q+ L6  ~4 u+ p. i, N9 z4 }$ v/ ~9 i% u
7
1 M* d0 E6 |4 ]) N2 \% N/ u! M8
4 E9 w. d2 [0 V9
& e" c& i5 ~3 O; `10
. _; b. H) x" a( P! Q% M/ g11
) d# v: m0 v3 |! B% [  m121 y/ ?2 p) o8 P/ n/ d4 C
13* o7 c8 s1 X) x- p- H% }1 I2 o$ m
14- |0 r0 T* \; V; O) i) S4 l% q
15  W4 a7 g. `& ^
16% r" S* m4 `0 A1 I6 G* z/ v
17, A9 G/ x& z3 n2 f) f, R) l

function _module_name_autocomplete($string) {
0 j3 _# e# o- v# b. E  l& {  $matches = array(); 
3 X$ r6 c; y8 i0 Y$ D2 B2 E  // Some fantasy DB table which holds cities
% C$ l3 l  Q7 \1 }/ i- W8 P- w3 d  $query = db_select('cities', 'c');
, S9 e4 I( @+ R" `- V5 Y  // Select rows that match the string8 A3 I& M& p) l
  $return = $query
7 _7 K; p) G8 s7 r    ->fields('c', array('city'))
9 R) j0 \$ c1 j6 D, h    ->condition('c.city', '%' . db_like($string) . '%', 'LIKE')8 S; q5 _* c& M0 ^
    ->range(0, 10)
2 e- I& W3 o, U7 |, \    ->execute(); ) p. f0 G7 C7 c$ s
  // add matches to $matches & W* @- ^# g1 j8 M. s& N; s- J
  foreach ($return as $row) {; H% }1 N* `9 D) w$ m" q  e' e+ i
    $matches[$row->city] = check_plain($row->city);  _2 M  H. m3 Q3 [4 F
  } 
% [# M& I* ^$ n9 S! E: h  // return for JS
/ b. L0 D/ a# W( B! n  drupal_json_output($matches);
( |9 F$ `. J6 ~3 ?( i}

这个函数我们通过db_select 读取数据库cities表的数据，从表数据中找到与用户输入相类似的条目。（如果不习惯db_select,也可以用回db_query，drupal 7同样支持）

如果你想要更多比较完整的例子，你可以去看看drupal 7的核心模块 taxonomy，里面有一个函数function taxonomy_autocomplete，大概在79行（‘modules/taxonomy/taxonomy.pages.inc’）。

还有也可以看看我的另外一个网站图标酷(http://www.openico.com)，那个搜索表单，也是autocomplete的。

现在，我猜想你应该能完成一个autocomplete 了，赶紧试一下吧，实践最关键。