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

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

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

 

 

 

 

1 , b m8 J% H5 y2 R( B. j2 3 4 5 5 M# D9 O3 N- G6 5 e. u1 k A& T6 M4 a+ q7 5 z: i' g* u2 @. _+ t! }- [8 3 O$ {3 V3 U" q, ~) L9 6 j' J4 |9 ~* o4 B; @* ^ K10 11 ( B; a7 P9 {' V F" U4 `12 13 & J: w C, h" F: _% f6 q* T

function module_name_form() {   $form = array(); 5 h6 s; E( A( _! s# h& H& o' r  $form['city'] = array( . I1 g$ J3 R% h. k    '#title' => t('City'),     '#type' => 'textfield', 2 o) d4 X1 o! m; _0 Q3 U    '#autocomplete_path' => 'example/autocomplete', //留意这行。下面将做讲解。    );   $form['submit'] = array(     '#type' => 'submit',     '#value' => 'Save', / s1 p! P3 S) Q" t+ @" [' Y  );   return $form; ' f5 `: ?) b% b5 v: s$ u" t0 ^}

 

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

1 2 $ K; @$ u5 W# j3 4 % S+ [# z5 g& b5 6 ( B5 {3 t& O' t# _7 8 5 R' ^; n" P0 B4 e3 I1 g" |1 m

function module_name_menu() {   $items['example/autocomplete'] = array( $ P) h4 d; \2 u$ A5 W. k    'page callback' => '_module_name_autocomplete',//这个是函数 function _module_name_autocomplete($string)，下面将讲述。     'access arguments' => array('access example autocomplete'),     'type' => MENU_CALLBACK   );   return $items; }

 

最后一步是创建函数 _module_name_autocomplete：

1 " V* i$ j8 l* A: f3 u& M* \7 L2 8 a7 G9 ?6 {+ Y( J3 2 ]' z# p0 |$ t! [( H0 U4 c) ` g& B4 5 6 7 % _& \4 X5 t- ~' S2 J. S6 I8 2 F) T( w3 ?% |' e# D3 C9 10 11 ) t! C, p- \9 s# q* z; h12 13 3 u/ g' C/ n7 X, P14 5 P+ j9 t9 o- O4 K15 16 $ {9 ^9 }' A7 o. O" O" Y% p17

function _module_name_autocomplete($string) {   $matches = array(); " }, V; x; Y/ x5 j  // Some fantasy DB table which holds cities $ ]" k, ~8 x5 E4 b5 a& G  $query = db_select('cities', 'c');   // Select rows that match the string 3 Z, L' m% D5 f$ R  $return = $query     ->fields('c', array('city')) ( v+ i& }( t+ E2 h    ->condition('c.city', '%' . db_like($string) . '%', 'LIKE') * r) R# K/ g( Q7 p8 ?) ]5 _" j& K    ->range(0, 10)     ->execute(); 0 ]% H' D" {5 Y6 E  // add matches to $matches   foreach ($return as $row) { 8 {+ r% c# O) P5 [1 ]    $matches[$row->city] = check_plain($row->city);   } 5 ]( z" e* `: T5 S! s" B1 ~+ x  // return for JS   drupal_json_output($matches); 1 G7 m2 A+ a. s) C. a0 x}

 

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

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