实用的,关于php联想输入的实现…

摘要没那么简单, 没那么复杂。

从体验的角度来说,联想输入还是很不错的。

11

原理:通过输入英文或者中文触发查询关键词库,构造一个下拉的元素。

方法:

1)我们需要一个input输入框

  1. <input name="key"  id="key"  type="text"  />

2)使用jquery autocomplete插件

从jquery-ui中剥离出js和css,网上有很多现成版本。

  1. <script type="text/javascript" src="jquery.min.js"></script>
  2. <script type="text/javascript" src="jquery.autocomplete.js"></script>
  3. <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />

插件几个常用参数如下:

disabled:是否在页面加载后不可用,默认为false,这个没必要设置成true,没有多大意义。

appendTo:输入时下拉的提示框追加元素,默认为"body"。

autoFocus:默认为false,当设置成true时,下拉提示框第一个将会是被选中的状态。

delay:加载数据时的延迟时间,默认为300,单位毫秒。

minLength:输入多少个字符时就会出现下拉提示,默认为1。

position:定义下拉提示框的位置。

source:定义数据源,数据源必须是json形式的,本例是通过请求search.php获取的数据源。

autocomplete还提供了许多事件和方法,详情请查看其官网:http://jqueryui.com/demos/autocomplete

3)如何使用?

  1. <script language="javascript">
  2. $(function(){
  3.     //josn字符串
  4.     var source=["c++""java""php""coldfusion""javascript""asp""ruby""python""c""scala""groovy""haskell""pearl""javascript1""javascript2""javascript3""javascript4""javascript5"];
  5.     $("#key").autocomplete(source);
  6. });
  7. </script>

尝试输入 java 试试?

22

4)延伸 ->php如何联想?

  1. <script language="javascript">
  2. $(function(){
  3.     $("#key").autocomplete({
  4.         source: "key.php"
  5.     });
  6. });
  7. </script>

说明:

数据源key.php,注意最后数据库中查询获取的结果集需要输出json格式数据,用json_encode转换下即可。

总的来说,比较简单,自己延伸拓展吧。

给我留言

图片 表情