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);

?>





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

利用easyUI的combobox打造自动提示组件

利用easyUI的combobox打造自动提示组件
  • u012345283
  • u012345283
  • 2014年10月02日 21:33
  • 7926

asp.net MVC项目中 没有easyui插件的智能提示

vs2015  中的mvc4项目,已经分别把jquery.min.js, jquery.easyui.min.js,easyui-lang-zh_CN.js依次拖入,写js代码的时候 智能提示只有jq...
  • zy0421911
  • zy0421911
  • 2016年04月23日 14:15
  • 1145

超级简单的实现搜索框智能提示 JQuery+Servlet

前台jsp
  • freepart
  • freepart
  • 2017年05月01日 17:22
  • 1663

基于jquery的搜索框输入提示

仿百度与google的搜索框输入提示,支持键盘上下选择与鼠标点击选择。只包含前面代码,后台返回数据为模拟的数据。 1.未输入前的效果 2.输入内容后,自动弹出下拉层,里面有若干匹配输入内容的...
  • shiyuezhong
  • shiyuezhong
  • 2012年10月11日 14:00
  • 34387

jQuery自己编写插件()

引言:   在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了...
  • chenxi1025
  • chenxi1025
  • 2016年08月16日 16:19
  • 3420

使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示

我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip...
  • u013310075
  • u013310075
  • 2015年07月31日 14:51
  • 1248

Eclipse插件支持jQuery智能提示

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

jquery easyui自动补全

$("#A").combobox({ valueField: 'a', textField: 'a', panelWidth: 200, ...
  • u014172271
  • u014172271
  • 2017年09月07日 14:09
  • 195

基于AJAX的输入提示jQuery插件

AJAX输入框jQuery插件设计
  • u013708440
  • u013708440
  • 2016年01月01日 11:50
  • 1050

基于jquery实现输入框的自动补全功能

自动完成功能是指:类似百度搜索之类的输入一个词的一部分后就自动提示,然后用户可以选择,不需要再输入剩余部分。  首先在输入框上注册keyup事件,然后在事件中通过ajax获取json对象。取得数据后...
  • u012027874
  • u012027874
  • 2016年12月22日 10:12
  • 3174
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件之智能提示(信息来自数据库字段)
举报原因:
原因补充:

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