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

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

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

 

 

 

 

1 d5 P/ q7 k0 M7 I- @, s2 3 ( G' _( j2 s* T( j4 2 @2 [- o/ t( E( E5 8 ~/ J. z) K! Z* k# e0 D6 7 8 ( ?% J# j Q+ W1 K5 i$ z9 & J3 f" X- E* ^10 - e% c _- D* z( F. U11 12 # {5 E; ^) K9 U13 ! v/ t0 u' k& r0 x

function module_name_form() { 8 D5 J. ? d. |" o3 Q8 B" X  $form = array(); . p0 r/ g' _% b6 `: Q  $form['city'] = array( : z2 P9 F# M6 f8 e/ l( ^: F    '#title' => t('City'),     '#type' => 'textfield', 7 \) \; W' z& a+ H6 f2 F8 T    '#autocomplete_path' => 'example/autocomplete', //留意这行。下面将做讲解。 ) y2 s5 J9 L4 Y/ [9 ]7 \ v   );   $form['submit'] = array(     '#type' => 'submit',     '#value' => 'Save', 8 O0 _& m! v0 H; b; }8 @+ G  ); % \% @8 y s# m \( k  return $form; 2 R9 x& \3 @% n+ z}

 

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

1 : \! ?- z6 B3 m9 P" r/ C, `2 3 8 r9 i6 J$ V, e. o8 v* C- _4 & [# n) Q- I* F/ I5 m, ^' G5 6 % W k' A2 F% b" Z+ b4 b! o' R; e7 6 I$ k, f" k) s# n+ ^8

function module_name_menu() {   $items['example/autocomplete'] = array( - I" Q0 ^; ]8 X N    'page callback' => '_module_name_autocomplete',//这个是函数 function _module_name_autocomplete($string)，下面将讲述。 1 b0 U$ g% [; W w6 V! {    'access arguments' => array('access example autocomplete'),     'type' => MENU_CALLBACK % s1 |8 P9 R8 R% A) I: L  );   return $items; 6 K' y2 d* H0 A}

 

最后一步是创建函数 _module_name_autocomplete：

1 2 3 , |" g8 z+ q1 S! c4 5 6 7 % s' x. ]/ y% f6 z. M* l# P7 d8 6 h; p7 N, b, F( E* f4 W9 10 % t- s" J& l4 o11 # g$ c) [ D) ?( w+ r' E12 13 * X# ~, {$ G0 u7 s7 T14 ' [1 o6 p2 ^ f6 g15 16 17 + K' s0 C; t/ [1 l* X# `0 X

function _module_name_autocomplete($string) {   $matches = array(); ' |1 U" r5 R8 t7 t+ d  // Some fantasy DB table which holds cities   $query = db_select('cities', 'c'); : r: W" R- ?* K4 b7 [  // Select rows that match the string   $return = $query     ->fields('c', array('city'))     ->condition('c.city', '%' . db_like($string) . '%', 'LIKE')     ->range(0, 10) 0 Q( r+ _- s- n$ S' l: O    ->execute();   // add matches to $matches - |+ ^3 f% G- o$ N8 o5 R  foreach ($return as $row) {     $matches[$row->city] = check_plain($row->city); 4 [- z2 b. k. a& w6 n- a7 ?0 ]4 ]  }   // return for JS   drupal_json_output($matches); , \7 k, Y/ {1 ^6 c- z}

 

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

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