Drupal 7 如何做自动完成输入框(Ajax Autocomplete)

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

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

 

 

 

 

1 2 * E' S4 {" J' d3 ( y/ \6 e9 k6 E4 5 7 [8 q! Q1 J2 @$ ~6 3 X5 ^/ H- z5 _/ k' U7 8 9 10 " g9 s0 o- `' @: p% B11 {' K" U" {4 c3 g: X. E- X$ b12 7 v' y6 a% w2 I/ ?13 % D% z, N. E% a6 m

function module_name_form() { , d0 @" w# V+ Y" v. M" B  $form = array(); & u9 V' ]4 k! q  $form['city'] = array( 4 |! F+ D& f0 U4 \$ {. Z$ X( V    '#title' => t('City'), 3 |- l) m; A: x- C% E    '#type' => 'textfield',     '#autocomplete_path' => 'example/autocomplete', //留意这行。下面将做讲解。 9 B# O, v; b- N   );   $form['submit'] = array( + F' P) N, r A+ n. @# b    '#type' => 'submit',     '#value' => 'Save',   );   return $form; ' Q3 T) _4 U/ A, ?. X; v% d}

 

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

1 2 , d* B; J0 E+ R% q# R( K3 4 6 P0 Q6 u8 w: g, z7 I t M+ w1 F5 6 , A- V: d, t L$ l7 " H: a" J" s2 O+ A/ K* P+ V, F$ L. _8

function module_name_menu() {   $items['example/autocomplete'] = array( 9 r" f% x8 ~; Q" U; M. q! `    'page callback' => '_module_name_autocomplete',//这个是函数 function _module_name_autocomplete($string)，下面将讲述。 8 i* i k k1 d- T& H( c    'access arguments' => array('access example autocomplete'),     'type' => MENU_CALLBACK 3 ]; n0 Y Z0 a  );   return $items; + N8 w: U* _: i( K5 x/ p* ^}

 

最后一步是创建函数 _module_name_autocomplete：

1 2 3 ) R4 ~! i! J2 K+ H$ h9 J4 - z6 f `* ? t* j5 2 O9 f( P" ?2 Q* `# T6 7 s, _7 m% O; @6 t( c' ~7 + u- D8 ]8 G _8 t; w8 5 I/ C: A2 m9 r3 a7 `9 10 : }3 S( X, d* S0 G' N* K& B( M11 12 13 14 15 16 5 g( S: y) D, w' `17

function _module_name_autocomplete($string) {   $matches = array(); 8 t! M& {9 z3 L; T g  // Some fantasy DB table which holds cities $ ]3 g; R) B6 }$ ~  $query = db_select('cities', 'c'); 4 |1 W! R4 C3 z0 |3 K/ P. c  // Select rows that match the string   $return = $query ( r, P) `5 G7 m5 B    ->fields('c', array('city'))     ->condition('c.city', '%' . db_like($string) . '%', 'LIKE')     ->range(0, 10) / W9 W G n4 \' f    ->execute(); ) V' U9 y" C0 q. F& S: g; m  // add matches to $matches : r& ?% N% w. z: s+ X' d7 z' f; u  foreach ($return as $row) { M9 _* _7 \% ?$ p2 [9 [    $matches[$row->city] = check_plain($row->city); 7 W' u) z: _) ?  } . p1 S0 w, E2 k  // return for JS ; v7 U7 k% R3 T  drupal_json_output($matches); C3 I( X$ g/ V: ?}

 

这个函数我们通过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 了，赶紧试一下吧，实践最关键。

猪跑啦独家原创专稿，欢迎您转载本文，转载请注明来源。