国外设计欣赏网站 - DOOOOR.com

 找回密码
 注册

QQ登录

只需一步,快速开始

扫一扫,微信登陆

搜索

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

[复制链接]
发表于 8-10-2012 21:48 | 显示全部楼层 |阅读模式


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

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

 

 

 

 

1  r0 S  O) }1 I4 O2 [8 f. S' N
2
2 W9 z  J* p) C1 J$ m3+ d" L' L8 D5 V* u- [9 _! w
4
2 F5 G( [0 X& d+ t" O! Z" [55 Z9 {( x: L1 B7 z5 \
6
5 u- {& ?; A# D  q  f  l7
* r/ w4 L$ H/ ~. \8 ^9 h8 O8
9 T) R) F& l( ?; N" M9
' F* d: [/ Y, d$ }6 q10
. m  l& ~( B  `6 w0 ?- x11  K/ W; ^' ~7 f1 f' o
12
& |! ?, d* L4 {) E- |& N13
! M3 w: n! D  Z0 L5 d  ]' b6 Q
function module_name_form() {
9 |. _8 Q4 E0 H. b, Y( r; R% W  $form = array(); 
' o1 o1 E. \3 S: N- `  $form['city'] = array(
1 U* O; l/ a' k! M; p    '#title' => t('City'),
! A) [: P3 {6 N0 p6 N    '#type' => 'textfield',
& E( \6 N" z2 T$ D" v    '#autocomplete_path' => 'example/autocomplete', //留意这行。下面将做讲解。/ r! _. n- `7 Z4 p, |; p
   );
+ s- A  {* ~% r, |" J9 S  $form['submit'] = array(& c/ Y& ]; a1 [& I
    '#type' => 'submit',0 W1 R5 Y# H. S" Q
    '#value' => 'Save',
5 F$ L* c8 C2 @  ); 6 X) V& {- W+ G1 C. l# e
  return $form;
8 ?  V& V* ]% I}

 

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

1/ Q$ f6 `' v9 J: a
2
1 M0 d' w5 L1 z2 [3
  }; U' A9 I0 R; J8 N! O4
! X: N3 c( `/ K" K8 e$ K9 {, h5) ~& }) D. o- ^) d7 X
6) G- j5 j6 ~- Y* V! i
7
. l( Y! y% p& S+ @3 y/ ?, `) p8
) N) Q; J8 a6 R1 W( b/ p, m
function module_name_menu() { ; k, O$ Z2 d+ D' Q( \$ `, H  c
  $items['example/autocomplete'] = array(
  d, L" c4 ^9 U  R. G- X) C    'page callback' => '_module_name_autocomplete',//这个是函数 function _module_name_autocomplete($string),下面将讲述。
- J  ]0 c: M0 A, |3 R0 B    'access arguments' => array('access example autocomplete'),
  [9 [0 ^- K% \- U    'type' => MENU_CALLBACK
/ F2 \4 B+ c1 Z# ~  );1 H8 U  K9 }% o; ?7 q, V
  return $items;
4 Y$ S4 b5 a- M. S5 S}

 

最后一步是创建函数 _module_name_autocomplete:

1
: ^! z% G1 O  a  L2
) K% X, P; _0 K3. `) W+ }7 |7 v. q) f2 f$ z
4
: G: c& I2 f# h% u2 u4 M: x! e  c5- z( X& H( u$ t
6$ _7 g- ^  P! G. S7 U+ L
7
# @$ E7 q( `0 B7 O7 u) m7 \) V. `8
1 n; @6 G$ M- e! s9$ u+ U1 [) B( K
10
6 X: @8 s; y' d$ f% Y( B4 c' ~+ g11
$ n0 {* ]; \! U' Z3 N% X12
' H. M9 n$ r) K$ U$ L134 m8 o2 A7 _5 @% M$ N! l
14
. I. F- F5 K4 s+ L1 t15" u: m3 Z; l) B$ w
16
: {% ]! T* T' d0 G8 k" g4 v: P17$ C' A+ ]- _$ v* H% l
function _module_name_autocomplete($string) {
( W1 D* I( b, r" V# x* g9 p  $matches = array(); 8 U+ N( w6 x2 h& g  X6 d5 p
  // Some fantasy DB table which holds cities3 }# w/ L$ `' F
  $query = db_select('cities', 'c');
; `' k* ?/ q+ ~1 W; S4 r; j  // Select rows that match the string
, O% j+ X; n- u  $return = $query& i! z- ?, N, L) @# `4 y
    ->fields('c', array('city'))4 ]2 S1 l- \4 _  l. ~4 `
    ->condition('c.city', '%' . db_like($string) . '%', 'LIKE')
9 F; D  I( v. K, \9 i    ->range(0, 10)
- y6 a5 a, A1 W/ e: H1 V- ~    ->execute(); 0 u! A1 }- \! N2 {3 T: h
  // add matches to $matches 
) `/ V* d# W) W( E& z' Y  |  foreach ($return as $row) {6 M% a6 \4 i( n+ o5 V/ W
    $matches[$row->city] = check_plain($row->city);
7 W  N% T, p8 |. I5 f) t  } " e/ z5 Q) T! E4 Y
  // return for JS
7 c+ W. c# q* R% P  drupal_json_output($matches);1 s# \# C1 s8 d7 L$ S! }& K
}

 

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



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

|2011-2026-版权声明|平台(网站)公约|手机版|手机版|DOOOOR 设计网 ( 吉ICP备2022003869号 )

GMT+8, 11-11-2025 21:41 , Processed in 0.252057 second(s), 123 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表