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

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

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

 

 

 

 

1 " X! b8 s! v3 e8 D2 ; r8 b$ Z; b. A" N8 G9 ~2 T5 G3 x: w! c; w* Y$ r4 # y$ U/ M: y( E5 6 7 , i6 e: c$ ^& e8 . A- c1 @, F% Z7 k9 10 11 ' J0 L1 m, m: }2 h" ?9 r# u12 13 # F- g9 F1 X& B/ S* [

function module_name_form() {   $form = array();   $form['city'] = array( % a9 {" ] @$ u8 A9 R8 t% P7 u3 Q$ z* d    '#title' => t('City'), & _8 Y7 s/ ~ v    '#type' => 'textfield',     '#autocomplete_path' => 'example/autocomplete', //留意这行。下面将做讲解。    ); , X% h, k% k& p$ {! a; D5 F  $form['submit'] = array( 2 `6 K. X2 h) L4 _    '#type' => 'submit', # Q2 I7 b8 w, b2 Q" e# C    '#value' => 'Save', 6 v y5 n1 `- i  );   return $form; }

 

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

1 , S( a. p; O! j2 3 4 5 6 7 8 h- S5 n# z( l5 }/ ]8 $ o0 p: d; W% Z5 B( U: z

function module_name_menu() { * M/ c% x) P# R: |1 k N9 M  $items['example/autocomplete'] = array( 2 w) ^$ W3 o; N8 |' }$ E# S: s    'page callback' => '_module_name_autocomplete',//这个是函数 function _module_name_autocomplete($string)，下面将讲述。 ) R/ A( U) x! L2 Q$ M- I9 K    'access arguments' => array('access example autocomplete'), 2 Q2 p: N' y' f9 C    'type' => MENU_CALLBACK   ); 9 }' j4 y$ O8 j0 c- e+ s  return $items; 4 G; e: L" P: o. P1 }}

 

最后一步是创建函数 _module_name_autocomplete：

1 - Z& x$ B; \/ q/ W- t! X* [2 % X& M" L# n: ~$ w5 X3 4 5 9 I5 I$ ]7 ^& u" {7 R5 K* `' I U6 7 8 1 x* z, N) I+ R! e4 h3 a9 10 6 w# O# U+ T4 }11 ( {( I5 L( d+ Y* P% p+ E! ^# J12 13 14 15 16 / p. l# I& n% g) v6 g7 `4 \9 i; [. D1 l17 1 a* F: x1 \2 u2 z) L! {8 \$ F: w

function _module_name_autocomplete($string) {   $matches = array(); p8 m3 e9 [; q8 U  // Some fantasy DB table which holds cities 5 S& {+ x# ]8 C: v5 o  $query = db_select('cities', 'c');   // Select rows that match the string 7 Z" A/ A/ [9 Z5 g, w/ }- D6 p  $return = $query ( P# |! _- t7 `% S4 S    ->fields('c', array('city')) # @& M* j3 V7 V0 A2 I    ->condition('c.city', '%' . db_like($string) . '%', 'LIKE') $ K) e% j6 ?) ~# K E6 U1 N    ->range(0, 10)     ->execute();   // add matches to $matches 3 x- K& o- Z$ I! t a0 `  foreach ($return as $row) {     $matches[$row->city] = check_plain($row->city);   } 3 C& X! S+ @4 @" Q/ b0 h  // return for JS   drupal_json_output($matches); }

 

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

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