jquery插件之智能提示(信息来自数据库字段)

原创 2012年03月29日 22:21:58

以下是需要引入的一些文件,如果没有您可以通过给定的地址进行下载,谢谢:

jquery-1.7.1.min.js                       http://jqueryui.com/

jquery-ui-1.8.18.custom.min.js      http://jqueryui.com/download

/jquery-ui-1.8.18.custom.css     该文件在下载好的第二个文件的该目录下:  jquery-ui-1.8.18.custom\css\ui-lightness\


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-ui-suggest-自动提示</title>
<!--引入jquery类库文件  必须要有顺序-->
<script type="text/javascript" language="javascript" src="./js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" language="javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<!--css-->

<link type="text/css" rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
	$(function (){
			$("#autocomplete").autocomplete({
					source:"./autocomplete.php",
				});
		});
</script>
</head>

<body>  
<input type="text" width="300" id="autocomplete"> 
</body>
</html>

php代码:  英文为源码,一部分中文为改进以适合本例子

<?php
header('Content-type:text/html; charset=utf-8');
$q = strtolower($_GET["term"]);
if (!$q) return;
$items = array();
//=============================连接数据库文件===========================
$link=mysql_connect("localhost","用户名","密码") or die("连接失败".mysql_error());
mysql_query("set names utf8");
mysql_select_db("area",$link);
$sql = "select * from area where name like '%".$q."%'";
$res = mysql_query($sql);
while($arr = mysql_fetch_assoc($res)){
             //这里我们只需要要查询匹配的字段的信息,当让也可以在select查询是直接指定返回想要的信息(将  *  替换成name(想要的字段))
             $items[] = $arr["name"];
	}
//=============================连接数据库文件===========================

//循环的将数组转换成json格式并返回,交给js解析	
function array_to_json( $array ){

    if( !is_array( $array ) ){
        return false;
    }
	//返回两个数组中的差集元素  array_diff
    $associative = count( array_diff( array_keys($array), array_keys( array_keys( $array )) ));
    if( $associative ){

        $construct = array();
        foreach( $array as $key => $value ){

            // We first copy each key/value pair into a staging array,
            // formatting each key and value properly as we go.

            // Format the key:
            if( is_numeric($key) ){
                $key = "key_$key";
            }
            $key = "\"".addslashes($key)."\"";

            // Format the value:
            if( is_array( $value )){
                $value = array_to_json( $value );
            } else if( !is_numeric( $value ) || is_string( $value ) ){
                $value = "\"".addslashes($value)."\"";
            }

            // Add to staging array:
            $construct[] = "$key: $value";
        }

        // Then we collapse the staging array into the JSON form:
        $result = "{ " . implode( ", ", $construct ) . " }";

    } else { // If the array is a vector (not associative):

        $construct = array();
        foreach( $array as $value ){

            // Format the value:
            if( is_array( $value )){
                $value = array_to_json( $value );
            } else if( !is_numeric( $value ) || is_string( $value ) ){
                $value = "'".addslashes($value)."'";
            }

            // Add to staging array:
            $construct[] = $value;
        }

        // Then we collapse the staging array into the JSON form:
        $result = "[ " . implode( ", ", $construct ) . " ]";
    }

    return $result;
}

$result = array();
foreach ($items as $key=>$value) {
	if (strpos($value, $q) !== false) {
		//strip_tags将去除html和php标记的value值,追加到数组的尾部,并入栈
		array_push($result, array("id"=>$key, "label"=>$value, "value" => strip_tags($value)));
	}
	if (count($result) > 4)      //这里指定的值为显示的提示信息的个数
		break;
}
echo array_to_json($result);

?>





版权声明:本文为博主原创文章,未经博主允许不得转载。

Eclipse插件支持jQuery智能提示

在网上搜索了一下,常用的有三个插件支持jQuery的智能提示:  1.jQueryWTP  2.Spket  3.Aptana       以下分别介绍而2个插件的安装方法:     Spk...
  • wwbmyos
  • wwbmyos
  • 2016年02月23日 14:49
  • 10165

supermap使用小结

 http://www.w3.org/1999/xhtml"> SuperMap iClient JavaScript:TiledDynamicRESTLayer var...

html5 实现网页截屏 页面生成图片(图文)

html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能。 因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样。 环...

Jquery插件之信息弹出框showInfoDialog(成功、错误、警告、通知)

功能:zhou en ce同学最近写了个基于jquery的信息弹出插件showInfoDialog,该插件对背景进行遮罩,然后弹出信息显示框,信息显示种类包括: 一、信息种类说明: 1.1、操作成...

利用[JQuery插件]___验证用户输入到文本框信息。

插件是以JQuery核心代码为基础,编写出符合一定规范的应用程序,并将程序进行打包,调用时,仅需要包含该打包后的JS文件即可 我们所介绍的以及常用的一些插件都可以在这里找到 http://ar...

loner_li JQuery插件 实现相册光箱特效(后台数据库调图片和前台直接显示)

1.后台数据库调图片 http://www.w3.org/1999/xhtml">                    #gallery         {           ...

一个jquery插件,页面上的等待提示

New Document /** * 使用方法: * 开启:MaskUtil.mask(); * 关闭:MaskUtil.unmask(); * * MaskUtil....
  • thc1987
  • thc1987
  • 2015年04月15日 14:55
  • 2965
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件之智能提示(信息来自数据库字段)
举报原因:
原因补充:

(最多只允许输入30个字)